如何将文字放在图片（JS）上

Question

我需要编写自己的模因生成器，问题是如何从表单（顶部和底部）获取文本并将其放置在画布上的图片上方。 我最近开始学习JS，并且只了解基础知识。 一些想法/提示？ 谢谢

HTML片段：

<div><label for="line-top">Top line</label><input type="text" id="line-top"></div>
<div><label for="line-bottom">Bottom line</label><input type="text" id="line-bottom"></div>

我试图编写代码：

var top = document.getElementById("line-top").value;
var bottom = document.getElementById("line-bottom").value;

document.onload = function (){
  top = document.getElementById("line-top").value;
  bottom = document.getElementById("line-bottom").value;

  context.font = "45pt Impact";
  context.fillStyle = "white";
  context.strokeStyle = "2pt black";

  context.fillText(top, 10, 90);
  context.fillText(bottom, 100, 100);
};

但这不起作用。

Answer 1

这可以通过相互堆叠2个画布来完成。在底部的画布上绘制图像（zindex较低），在上方的画布上放置文本（zindex较高）。简单呵呵......我已经完成了在我的情况下相同，并且可以滑腻地工作。干杯:)这是示例代码--->

<div><label for="line-top">Top line</label><input type="text" id="line-top" value="52"></div>
<div><label for="line-bottom">Bottom line</label><input type="text" id="line-bottom"></div>


    <div style="position: relative;">
 <canvas id="canBottom" width="400" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="canUpper" width="400" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

使用Javascript - >

var top = document.getElementById("line-top").value;
var bottom = document.getElementById("line-bottom").value;


var canbotom=document.getElementById('canBottom');
var ctxbottom=canbotom.getContext('2d');
var cantop=document.getElementById('canUpper');
var ctxtop=cantop.getContext('2d');
canbotom.style.zIndex=1;
cantop.style.zIndex=2;

ctxbottom.fillStyle="#FF0000";
ctxbottom.fillRect(0,0,400,400);


 ctxtop.clearRect(0, 0,400, 400);
    ctxtop.save();
    ctxtop.fillStyle = '#ADFF2F';
    ctxtop.font = "15px arial";
ctxtop.fillText(top,15,15);

继承人的工作演示https://jsfiddle.net/mzeysom6/

Answer 2

您可能需要查看这些div上的Z索引。 这应该允许文本行显示在图像上方。

我本人并没有做太多的工作，但是您应该阅读一下z-index……可能会有所帮助。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 3

我知道您用JavaScript标记过，但是为什么呢？

据我了解您的问题，我会用html / css做的：

<div class="wrp">
  <canvas></canvas>
  <div class="top">
    <label for="line-top">Top line</label><input type="text" id="line-top"/>
  </div>
  <div class="bottom">
    <label for="line-bottom">Bottom line</label><input type="text" id="line-bottom"/>
  </div>
</div>

和

.wrp {
  width: 200px;
  height: 200px;
  position: relative;
}
canvas {
  background: red; /* dummy image ;-) */
  width: 100%;
  height: 100%;
}
.wrp div {
  position: absolute;
}
.wrp .top {
  top: 0;
}
.wrp .bottom {
  bottom: 0;
}

可以通过javascript动态设置html。