在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);


    };