畫布擺動圖像

Question

我試圖讓圖像擺動。但我有一些問題。我正在使用本教程http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/

我試着改變教程的第55-61行以加載圖像src。但它沒有顯示任何東西。

有什麼建議嗎？

<canvas id="myCanvas" width="578" height="200"></canvas> 
    <script> 
     window.requestAnimFrame = (function(callback) { 
     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
     function(callback) { 
      window.setTimeout(callback, 1000/60); 
     }; 
     })(); 

     function drawRectangle(myRectangle, context) { 
     context.beginPath(); 
     context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); 
     context.fillStyle = '#8ED6FF'; 
     context.fill(); 
     context.lineWidth = myRectangle.borderWidth; 
     context.strokeStyle = 'black'; 
     context.stroke(); 
     } 
     function animate(myRectangle, canvas, context, startTime) { 
     // update 
     var time = (new Date()).getTime() - startTime; 
     var amplitude = 150; 

     // in ms 
     var period = 2000; 
     var centerX = canvas.width/2 - myRectangle.width/2; 
     var nextX = amplitude * Math.sin(time * 2 * Math.PI/period) + centerX; 
     myRectangle.x = nextX; 

     // clear 
     context.clearRect(0, 0, canvas.width, canvas.height); 

     // draw 
     drawRectangle(myRectangle, context); 

     // request new frame 
     requestAnimFrame(function() { 
      animate(myRectangle, canvas, context, startTime); 
     }); 
     } 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 

     var myRectangle = new Image(); 
         myRectangle.src = "http://www.skilledsoldiers.com/e107_plugins/aacgc_gamelist/icons/dota2_icon.png"; 
         myRectangle.onload = function() 
     }; 

     drawRectangle(myRectangle, context); 

     // wait one second before starting animation 
     setTimeout(function() { 
     var startTime = (new Date()).getTime(); 
     animate(myRectangle, canvas, context, startTime); 
     }, 1000); 
    </script> 

Answer 1

您需要使用context.drawImage而不是試圖繪製帶有圖像的矩形。

function drawImage(myRectangle, context) { 
    context.drawImage(myRectangle.img, myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); 
} 

看到這個小提琴：http://jsfiddle.net/fb4vS/