Question

我遵循W3 Schools教程并最终编写了以下代码，这些代码不会在canvas元素中复制图像。画布是空白的......

<img id="image" src="assets/images/bw.jpg" width="200" height="276" alt="" />
<canvas id="canvas" width="220" height="286"></canvas>

和Javascript如下：

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img,0,0);

为什么这个简单的例子不起作用？

Answer 1

~~尝试在width来电时加入height，.drawImage();那是~~

@Kaiido耐心指出的实际解决方案是使用附加到onload元素的<img>事件属性

<img id="image" onload="draw()" src="http://lorempixel.com/50/50" width="200" height="276" alt="" />
<canvas id="canvas" width="220" height="286"></canvas>
<script>
  function draw() {
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    var img = document.getElementById("image");
    ctx.drawImage(img,0,0);
  }
</script>

或HTMLImageElement.addEventListener("load", handler)

html画布绘制图像不起作用

1 个答案: