javascript - 将图像绘制到 HTML Canvas

Question

我已经查看了其他 SO 帖子和 MDN 文档等，但仍然无法弄清楚为什么我的图像没有出现在 Canvas 中。感谢您对此提供的任何帮助。

HTML

<canvas id="myCanvas" style="height:500px;width:500px;border:0.5px solid #979797;"></canvas>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
}
img.src = 'http://i.imgur.com/3dItN1Y.png';

https://jsfiddle.net/rsL3vsju/

Answer 1

发生这种情况是因为您正在使用 CSS 设置 Canvas 的高度和宽度，如下所示:

<canvas id="myCanvas" style="height: 500px; width: 500px; border: 0.5px solid #979797;"></canvas>

那是错误的代码。正确的做法是使用 Canvas 的height和width属性，如下:

<canvas id="myCanvas" height="500" width="500" style="border: 0.5px solid #979797;"></canvas>