перерисовки изображения на холсте с использованием DrawRect после FillRect

Question

Я учусь, чтобы сделать простую игру, используя холст

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

Мой игровой цикл, используя requestAnimationFrame работает, как и ожидалось, пока я пытаюсь заполнить холст с цветом, а затем сразу же отобразить персонажа. Затем я просто получаю фоновый цвет.

var render = function() { 

     //canvasHelpers.setBg();  

     renderCharacters.player(); 
    }; 

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


    };