Javascript 将图像绘制到HTML画布
我已经阅读了其他的SO帖子和MDN文档等,但仍然不明白为什么我的图片没有出现在画布上。我非常感谢你在这方面的帮助 HTMLJavascript 将图像绘制到HTML画布,javascript,html,canvas,Javascript,Html,Canvas,我已经阅读了其他的SO帖子和MDN文档等,但仍然不明白为什么我的图片没有出现在画布上。我非常感谢你在这方面的帮助 HTML 发生这种情况是因为您正在使用CSS设置画布的高度和宽度,如下所示: <canvas id="myCanvas" style="height: 500px; width: 500px; border: 0.5px solid #979797;"></canvas> 对我来说,使用不同的图像将其更改为使用https对我没有帮助。尝试使用另外两个参数调用
发生这种情况是因为您正在使用CSS设置画布的高度和宽度,如下所示:
<canvas id="myCanvas" style="height: 500px; width: 500px; border: 0.5px solid #979797;"></canvas>
对我来说,使用不同的图像将其更改为使用https对我没有帮助。尝试使用另外两个参数调用
drawImage
,即要绘制的图像的宽度和高度,如下所示:ctx.drawImage(img,0,0,500,500)
并相应地设置画布的宽度和高度属性。css宽度/高度样式只会拉伸画布视图,而不会设置画布视图尺寸。使用html属性width=”“
(或画布对象上的属性)设置尺寸。因此,您使用的图像中唯一可见的部分是白色的周围background@PatrickEvans,将其作为答案发布!
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';
<canvas id="myCanvas" style="height: 500px; width: 500px; border: 0.5px solid #979797;"></canvas>
<canvas id="myCanvas" height="500" width="500" style="border: 0.5px solid #979797;"></canvas>