html画布绘制图像不起作用

html canvas draw image not working

本文关键字：图像 不起作用 绘制 布绘制 html      更新时间：2023-11-18

我学习了W3学校的教程，最终编写了以下代码，这些代码不需要在画布元素中复制图像。画布为空。。。

<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);

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

尝试在.drawImage()调用中包含width、height；即

正如@Kaiido耐心指出的那样，实际的解决方案是使用<img>元素附带的onload事件属性

<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)

相关文章：