清除画布后不绘制图像（html5画布）

Question

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

我已经附上了截图，链接在下面。

这就是我清除画布的方式：

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

使用您的代码，我做了一些更改，我删除了 tmpTcx.clip()，看看 fidlle。提示：对于性能问题，您不需要在每次编写画布时都加载图像。

可怜的例子：https://jsfiddle.net/wf4z0d2h/1/

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

    function drawImageBall(x,y,radius,startAngle,color)
    {
        if(x == undefined){x = 100;}
        if(y == undefined){y = 100;}
        if(radius == undefined){radius = 40;}

        //var img = document.createElement('img');
        //img.src = 'img/coin-icon.png';
        //img.src = "http://ps2.lansa.com/images/icons/normal/256/coin_256.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.stroke(); // Draw it
            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.stroke(); // Draw it
            //tmpCtx.closePath();
            //tmpCtx.restore();
        //};
    }
    var img = document.createElement('img');
        //img.src = 'img/coin-icon.png';
        img.src = "http://ps2.lansa.com/images/icons/normal/256/coin_256.png";

    //drawImageBall();
    img.onload = function(){
    x = 0;
    y = 0;
    setInterval(function(){
        x = x+10;
        y = y+10;
        clearCanvas();
        drawImageBall(x,y);

    },300);
    }

Answer 2

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

在下载期间，Javascript 不会停止（！）。相反，JS 将继续执行任何以下代码。这导致了您意想不到的问题。

所以在您的应用开始时只下载一次 img。这样您的drawImage 将按照您期望的顺序完成，因为在您的图片下载过程中不会有任何延迟。