Question

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

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

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


    };

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

1 个答案: