在HTML画布中绘制图像

Question

我已经查看了其他关于此问题的SO帖子和MDN文档等，但仍然无法弄清楚为什么我的图像没有出现在画布中。非常感谢您的帮助。

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/

- Tom Coughlin

---

使用不同的图片对我来说也能正常工作 https://jsfiddle.net/j08691/rsL3vsju/1/ - j08691

将其更改为使用https对我没有帮助。 - Scimonster

尝试使用两个额外的参数调用drawImage，即要绘制的图像的宽度和高度，例如：ctx.drawImage(img, 0, 0, 500, 500);，并相应地设置画布的宽度和高度属性。 - wiredolphin

你的CSS中width/height样式只会拉伸画布视图，而不是设置画布视图的尺寸。请使用HTML属性width="" height=""（或Canvas对象上的属性）来设置尺寸。由于这个原因，你所使用的图像中唯一可见的部分是白色周围的背景。 - Patrick Evans

非常感谢@PatrickEvans！现在我明白这里发生了什么。我也感谢@Vincent的有益回答！ - Tom Coughlin

@PatrickEvans，请将其发布为答案！ - Alex K

Answer 1

这是因为您正在使用CSS设置画布的高度和宽度，就像这样：

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

那是错误的代码。正确的方法是使用画布的 height 和 width 属性，如下所示：

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

- Gabriel Marques