HTML5画布线性图像动画

Question

我是Canvas的新手，我已经开始使用HTML Canvas教程中的一个简单线性运动动画示例。

是否可以将矩形替换为显示图像？

每次我尝试编辑代码时，输出的图像都是静态的，所以我显然做错了什么。

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

如何在javascript中从imageData生成图像？

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

编辑：上面的示例更新得尽可能快，以便在setTimeout调用中对requestAnimationFrame的调用进行位封装。

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