Question

我试图在javascript中制作一个boomshine游戏的变体，当我用弧形函数绘制圆形时，一切都有效。然而，当我尝试用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

请注意，下载img需要一些时间。

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

所以在应用开始时只下载一次img 。这样，您的drawImage将按照您预期的顺序完成，因为下载图片时不会出现延迟。

Answer 2

使用你的代码，我做了一些更改，我删除了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);
    }

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

2 个答案: