HTML5 Canvas線性圖像動畫

Question

我是Canvas的新手，我已經開始使用來自HTML Canvas Tutorials的簡單線性動畫動畫的示例。

是否可以替換矩形，使其顯示圖像？

每次我試圖編輯代碼時，輸​​出的圖像都是靜態的，所以我顯然做錯了什麼。

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(); 
             context.drawImage = 'images/player.png'; 
            } 

            function animate(myRectangle, canvas, context, startTime) { 
             // update 
             var time = (new Date()).getTime() - startTime; 

             var linearSpeed = 200; 
             // pixels/second 
             var newX = linearSpeed * time/1000; 

             if (newX < canvas.height - myRectangle.height - myRectangle.borderWidth/2) { 
              myRectangle.y = newX; 
             } 

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

             drawRectangle(myRectangle, context); 

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

            var myRectangle = { 
             x: 20, 
             y: 0, 
             width: 50, 
             height: 50, 
             borderWidth: 5, 
             img: 'images/player.png' 
            }; 

            drawRectangle(myRectangle, context); 

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

任何幫助將不勝感激，在此先感謝。 :)

Answer 1

好了，在這裏你走，在一個的jsfiddle工作示例：http://jsfiddle.net/zymz2dLo/61/

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame; 

// get canvas and create drawing context 
// this assumes there is some canvas with id 'myCanvas' 
var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 

// create image 
var img = document.createElement("img"); 

// fill image from data string 
//img.src = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; // insert a dot image contains 1px 

// or fill image from url 
img.src = "http://www.w3schools.com/tags/img_the_scream.jpg" 


// define the linear speeds 
var xSpeed = 0.05; //px per ms 
var ySpeed = 0.01; 

// this function will animate the next 'frame' 
// based on input from the last 
function animate(nowTime, lastTime, xPos, yPos) { 
    if ((img.style.width + xPos) > canvas.width) { 
     xPos = 0; 
     yPos = 0; 
    } 

    // calculate the delta in order to match the speed 
    var timeDelta = nowTime - lastTime; 
    var xDelta = xSpeed * timeDelta; 
    var yDelta = ySpeed * timeDelta; 

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

    //draw img 
    context.drawImage(img, xPos, yPos); 

    //schedule animation for the next available frame 
    requestAnimationFrame(
     //wrap animate in a anonymous function to 
     //match the callback signature 
     function(timestamp){ 
      animate(timestamp, nowTime, xPos + xDelta, yPos + yDelta); 
     } 
    ); 
} 

animate(0, 0, 10, 1); 

額外

信息可以在這裏找到：

http://www.w3schools.com/tags/canvas_drawimage.asp

How to generate an Image from imageData in javascript?

https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame

編輯： 上面的示例儘可能快地更新，將其縮小一點，將呼叫打包爲​​調用setTimeout。

Answer 2

謝謝@snies。我設法通過下面的代碼獲得了我正在尋找的效果。很可能做了一下整理，但它的工作原理現在

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame; 

            var canvas = document.getElementById('monopoly-piece'); 
            var context = canvas.getContext('2d'); 

            var img = document.createElement("img"); 
            img.src = "images/player.png" 

            var xSpeed = 0; //px per ms 
            var ySpeed = 0.1; 

            function animate(nowTime, lastTime, xPos, yPos) { 
             // update 
             if ((img.style.height + yPos) > canvas.height) { 
              xPos = 0; 
              yPos = 0; 
             } 
             var timeDelta = nowTime - lastTime; 
             var xDelta = xSpeed * timeDelta; 
             var yDelta = ySpeed * timeDelta; 

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

             //draw img 
             context.drawImage(img, xPos, yPos); 

             if (yPos > canvas.height - img.height) { 

             } 
             else { 
              requestAnimationFrame(
                function(timestamp){ 
                 animate(timestamp, nowTime, xPos + xDelta, yPos + yDelta); 
                } 
               ); 
              } 

            } 

           animate(0, 0, 20, 1);