Javascript 在fillRect之后使用drawRect在画布上重画图像

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

我使用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);
}

---

出现此问题是因为您正在加载每个渲染的图像

看到我的叉子了吗

声明

图像

var squirrelImage = new Image();

在init中，您可以

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


    };

---

啊，谢谢你抽出时间！是的，我真傻。会让它旋转一下。