Question

这段代码会将画布复制到图像上，直到我尝试使用drawImage为止。不起作用。按原样运行代码，单击“将画布发送到图像”，然后 canvas图像放置在img元素中。取消注释'ctx.drawImage（img， 10，10，100，100）;'也应该将evee添加到img元素中，但是相反，canvas2image()函数根本不起作用。有什么想法吗？

function draw2canvas() {
  var canvas = document.getElementById("thecanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
  ctx.fillRect(25, 25, 100, 100);
  ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
  ctx.fillRect(58, 74, 125, 100);

  var img = document.getElementById("test_image");
  //ctx.drawImage(img, 10, 10, 100, 100);

  ctx.font = "18px courier";
  ctx.fillStyle = "red";
  ctx.fillText("this is text", 20, 70);
}

function canvas2image() {
  var canvas = document.getElementById("thecanvas");
  document.getElementById("theimage").src = canvas.toDataURL();
}

<body onload="draw2canvas()">
  <img id="test_image" src="http://cdn.bulbagarden.net/upload/thumb/e/e2/133Eevee.png/250px-133Eevee.png" alt="test image" width="100" height="100">
  <br><br>

  <image id="theimage"></image>
  <canvas width=200 height=200 id="thecanvas"></canvas>
  <div>
    <button onclick="canvas2image()">send Canvas to Image</button>
  </div>
</body>

Answer 1

好吧，我可以立刻发现HTML的问题-没有<image>元素。您是要做成这个<img>吗？似乎可以在我制作的代码段中使用，点击按钮后的输出如下：

画布到图像的作品，但不是canvas.drawImage的作品

1 个答案: