javascript - 清除 Canvas 后不绘制图像(html5 Canvas )

Question

我正在尝试使用 javascript 制作 boomshine 游戏的变体，当我使用 arc 函数绘制圆形时一切正常。但是，当我尝试用 drawImage 函数替换 arc 函数以使用硬币图像而不是圆形时，当我清除 Canvas 以删除之前绘制的圆形时，我开始遇到问题。如果我在渲染图像之前不清除 Canvas ，则图像将绘制在 Canvas 上，但旧图像仍在 Canvas 上。但是当我在再次渲染图像之前清除 Canvas 时， Canvas 上什么也没有绘制。

我已经包含了屏幕截图，链接在下面。

这就是我清除 Canvas 的方式:

var ctx = game.context;
ctx.fillStyle = "darkgray";
ctx.fillRect(0, 0, game.canvas.width, game.canvas.height);

这是我绘制图像的方式:

function drawImageBall(x,y,radius,startAngle,color)
{
var img = document.createElement('img');
img.src = 'img/coin-icon.png';

var tmpCtx= game.context;
var ax = x-radius;
var ay = y-radius;

img.onload = function() {
    tmpCtx.save();
    tmpCtx.beginPath();
    tmpCtx.arc(x, y, radius, 0, Math.PI * 2, true);
    tmpCtx.closePath();
    tmpCtx.clip();

    tmpCtx.drawImage(img, ax, ay, img.width, img.height);

    tmpCtx.beginPath();
    tmpCtx.arc(0, 0, radius, 0, Math.PI * 2, true);
    tmpCtx.clip();
    tmpCtx.closePath();
    tmpCtx.restore();
};
}

Clearing canvas (screenshot) Without clearing canvas (screenshot)

Answer 1

请记住，下载 img 需要一些时间。

在下载期间，Javascript 不会停止(!)。相反，JS 将继续执行任何后续代码。这会导致您出现意想不到的问题。

因此在您的应用启动时只下载一次 img。这样您的 drawImage 就会按照您期望的顺序完成，因为在下载图像时不会有延迟。