在fillRect之后使用drawRect在画布上重新绘制图像

Question

我正在学习使用画布制作一个简单的游戏

http://codepen.io/mrbizle/pen/qZREjN

我使用requestAnimationFrame进行的游戏循环按预期工作，直到我尝试用一​​种颜色填充画布，然后立即渲染一个角色。 然后我就得到背景色。

   var render = function() {

        //canvasHelpers.setBg();    

        renderCharacters.player(); 
    };

取消注释canvasHelper.setBg会演示该问题。

相关功能：

var renderCharacter = function(x, y, bounce, size) {

    /**
     * The time since last draw time
    */
    var img = new Image();

    var svg = new Blob([characterSvgData], {
        type: 'image/svg+xml;charset=utf-8'
    });
    var url = domUrl.createObjectURL(svg);

    img.onload = function() {
        ctx.drawImage(img, x, y + bounce, size * 500, size * 250);
        domUrl.revokeObjectURL(url);
    }

    img.src = url;

};

...

setBg: function() {

    ctx.fillStyle = s.backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

Answer 1

发生问题是因为您正在加载每个渲染的图像...

看到我的叉子http://codepen.io/anon/pen/RaKOBZ?editors=0010

声明Image

var squirrelImage = new Image();

在初始化中你可以做

    var init = function() {

       ...

        var svg = new Blob([characterSvgData], {
            type: 'image/svg+xml;charset=utf-8'
        });
        var url = domUrl.createObjectURL(svg);
        squirrelImage.src = url;

       ...
    };

并渲染

    var renderCharacter = function(x, y, bounce, size) {


              ctx.drawImage(squirrelImage, x, y + bounce, size * 500, size * 250);


    };