javascript - 如何获得在图像上显示文本的功能？

Question

我正在尝试将文本输入到 html 表单字段（按钮）中，然后该字段将显示在图像上的同一页面上。任何关于我如何让两人互相交谈的建议都将不胜感激。

<canvas id="myCanvas" width="900" height="600" style="border:1px solid #404040;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
  var canvas = document.getElementById("myCanvas"); 
  var ctx = canvas.getContext("2d");
  var img =new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0, 900, 600);

    function myFunction() {
      document.getElementById("line1").innerHTML;
      var line1 = document.getElementById("line1").value;
      var line2 = document.getElementById("line2").value;
      var line3 = document.getElementById("line3").value;
    }
    //the code below positions the overlaying text on the image
    ctx.font = "bold 36px Times";
    ctx.fillStyle = "black";
    ctx.fillText ("line1",400,325);
    ctx.fillText ("line2",400,375);
    ctx.fillText ("line3",400,425);
  }

  //this is the image 
  img.src= "bus_red.gif"
</script>

 //the code below allows the user to input text into boxes

<div>
  <form>
    <label for="line1">Enter your text: </label>
    <input type="text" autocomplete="off" id="line1" placeholder="line1"><br>
    <label for="line2">Enter your text: </label>
    <input type="text" autocomplete="off" id="line1" placeholder="line2"><br>
    <label for="line3">Enter your text: </label>
    <input type="text" autocomplete="off" id="line1" placeholder="line3"><br>

    //Click the "click-me' button to return the text on the "HTML" button 
    <button onclick="myFunction()">Click me</button> 
  </form>
</div>

标签： javascripthtml

Answer 1

试试这个。对于按钮，仅当用户继续按住按钮时，显示的元素才会保留。因此，我将其更改为一个单选框，您可以在其中将其设置为按钮。

该按钮已与画布链接，并分别显示插入不同文本框中的按钮。

编辑：我添加了一个重置​​代码来重置画布，并设置了两个“按钮”的样式。

测试和工作

<canvas id="myCanvas" width="900" height="600" style="border:1px solid #404040;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>


    function myFunction() {
  var canvas = document.getElementById("myCanvas"); 
  var ctx = canvas.getContext("2d");
  var img =new Image(); 
 
  img.onload = function() {
   
    ctx.drawImage(img, 0, 0, 900, 600);

    }
    //the code below positions the overlaying text on the image
    ctx.font = "bold 36px Times";
    ctx.fillStyle = "black";
    ctx.fillText ( document.getElementById("line1").value ,400,325);
    ctx.fillText ( document.getElementById("line2").value ,400,375);
    ctx.fillText ( document.getElementById("line3").value ,400,425);
 


 }

  img.src= "images/image1.jpg"

function myFunction2() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
  }
  //this is the image 

</script>

 //the code below allows the user to input text into boxes

<div>
  <form>
    <label for="line1">Enter your text: </label>
    <input type="text" autocomplete="off" id="line1" placeholder="line1"><br>
    <label for="line2">Enter your text: </label>
    <input type="text" autocomplete="off" id="line2" placeholder="line2"><br>
    <label for="line3">Enter your text: </label>
    <input type="text" autocomplete="off" id="line3" placeholder="line3"><br>

    //Click the "click-me' button to return the text on the "HTML" button 
    <a id="input-button" onclick="myFunction()">Click me</a> 
    <a href="#" id="input-reset" onclick="myFunction2()">Reset</a> 
  </form>
</div>
<style>
#input-button {
    padding: 2em;
    background-color: black;
    color: #fff;

}   

#input-reset {
    padding: 2em;
    background-color: black;
    color: #fff;
    text-decoration: none;
}
 </style>