Question

drawimage方法不起作用。这段代码有错误吗？ HTML：

<body>
<div id="container">
        <canvas id="canvas" width="700" height="350"></canvas>
</div> 
</body>

的javascript：

function init()
{
var canvas = document.getElementById('canvas');
var ctx    = canvas.getContext('2d');
var chop   = new Image();
chop.src   = "chopper.png";

ctx.drawImage(chop,10,10,200,200);
};

window.onload = function() {init()};

Answer 1

代码中存在很大的错误。

在尝试绘制图像之前，JS不会等待图像完成下载 window.onload不保证所有异步调用都已完成。

var img = new Image();
img.onload = function () { ctx.drawImage(img, ...); };
img.src = "...";

无论窗口是否已完成加载，现在都可以使用...（除非图像被缓存，否则它将会有效）。

Answer 2

您需要等到图像加载后才能绘制它：

var chop = new Image();

chop.onload = function() {
    ctx.drawImage(chop,10,10,200,200);
};

chop.src = "chopper.png";

canvas的drawImage方法不起作用

2 个答案: