Question

我需要编写自己的meme生成器，问题是如何从表单（顶部和底部）获取文本并将其放在画布上的图片上方。我最近开始学习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>

我尝试编码smth：

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）。简单呵呵?? ...我在我的情况下做了同样的工作和工作黄油顺利。欢呼:) 以下是示例代码---＆gt;

<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 - ＆GT;

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-index。这应该允许文本行显示在图像上方。

我自己并没有过多地使用它，但你应该多读一些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。

如何将文本放在图像上（JS）

3 个答案: