Question

我偷了下面的代码，试图弄清楚如何构建类似的东西。但是我没有看到我可以调整动画的速度。即此代码用于从左到右移动的图像，但移动速度太慢。

<canvas id="canvas" width=1200 height=300></canvas>

<script>
window.requestAnimFrame = (function(){
return  window.requestAnimationFrame       ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    window.oRequestAnimationFrame      ||
    window.msRequestAnimationFrame     ||
    function( callback ){
        window.setTimeout(callback, 1000 / 120);
    };
})();

var canvas = document.getElementById("canvas"),
cx = canvas.getContext("2d");

function Card(x,y){
this.x = x || -300;
this.y = y || 0;
this.img=new Image();

this.init=function(){

    // this makes myCard available in the img.onload function
    // otherwise "this" inside img.onload refers to the img
    var self=this;

    this.img.onload = function() 
    {
        self.draw();
        loop();
    }
    this.img.src = "f15ourbase.png";  
}

this.draw = function(){
    cx.drawImage(this.img, this.x, this.y);
}

}

var myCard = new Card(50,50);
myCard.init();

function loop(){

if(myCard.x<canvas.width-0){
    requestAnimFrame(loop);
}

cx.clearRect(0, 0, canvas.width, canvas.height);

myCard.x++;

myCard.draw();

}
</script>

Answer 1

将window.setTimeout(callback, 1000 / 120);更改回window.setTimeout(callback, 1000 / 60);

而不是：

myCard.x++;

您将其移动5像素，例如：

// this increases 5 pixels
myCard.x = myCard.x + 5;

在HTML中，您还缺少画布宽度和高度元素的撇号：

<canvas id="canvas" width="1200" height="300"></canvas>

修改

一些神秘的方式我投票没有评论（？），因为我讨厌它我最终制作了一个新的代码，试图解决大多数（如果不是所有）我可以在代码作者提供的问题中找到的问题 - 为所有人添加了代码注释相关部分。

// Animation frame gist window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); // Variable declarations var canvas = document.getElementById("canvas"), cx = canvas.getContext("2d"), myCard; /** * Card declaration * */ var Card = function(x, y) { // Values after || is values what orginal post author wanted to use this.x = x || -300; this.y = y || 0; this.img = undefined; // Image to be used for this card this.imgSrc = "f15ourbase.png"; }; /** * Initialize * */ Card.prototype.init = function(callback) { // self refers to this card var self = this; this.img = new Image(); // onload success callback this.img.onload = function() { // triggering callback on successfull load return callback(); }; // onload failure callback this.img.onerror = function() { // Returning error message for the caller of this method return callback("Loading image failed!"); }; // Triggering image loading this.img.src = this.imgSrc; }; /** * Draw this on canvas * */ Card.prototype.draw = function() { // cx (context) could be also passed, now it is global cx.drawImage(this.img, this.x, this.y); }; /** * Main loop * */ function loop() { // Clear canvas cx.clearRect(0, 0, canvas.width, canvas.height); // If card is still within visible area, we continue loop if(myCard.x < canvas.width) { // Draw card myCard.draw(); // Move card by 5 pixels myCard.x = myCard.x + 5; // Schedule next loop // "return" makes sure that we are not executing lines below this return requestAnimFrame(loop); } // Just for debugging, diplayed when animation done console.log("Animation finished"); }; // Main program starts - Creating a new card instance myCard = new Card(50, 50); // Initializing card myCard.init(function(err) { // if error with loading the image of the card, we notify if(err) { return alert(err); } // no errors, we can do the main loop loop(); });

查看 Updated JsFiddle example

为了进一步探索HTML5画布的可能性，我建议您阅读html5canvastutorials
中的教程

Answer 2

如果您希望能够在画布中更改动画速度，则应更改window.requestAnimFrame函数。我为这种情况创建了一个jsfiddle（只是尝试改变setTimeOut方法的毫秒数，你会看到：window.setTimeout（callback，100）;）

所以，最终的代码应该是：

window.requestAnimFrame = (function(){
return function( callback ){
        window.setTimeout(callback, 100);
    };
})();

var canvas = document.getElementById("canvas"),
cx = canvas.getContext("2d");

function Card(x,y){
this.x = x || -300;
this.y = y || 0;
this.img=new Image();

this.init=function(){

    // this makes myCard available in the img.onload function
    // otherwise "this" inside img.onload refers to the img
    var self=this;

    this.img.onload = function() 
    {
        self.draw();
        loop();
    }
    this.img.src = "f15ourbase.png";  
}

this.draw = function(){
    cx.drawImage(this.img, this.x, this.y);
}

}

var myCard = new Card(50,50);
myCard.init();

function loop(){

if(myCard.x<canvas.width-0){
    requestAnimFrame(loop);
}

cx.clearRect(0, 0, canvas.width, canvas.height);

myCard.x++;

myCard.draw();

}

Answer 3

更改

window.setTimeout(callback, 1000 / 120);

到

window.setTimeout(callback, 1000 / 60);

通过每帧增加一个更大的x值来加速移动：

var NumOfPixelsPerFrame = 4;
myCard.x += NumOfPixelsPerFrame ;

要防止卡片滑出视野，只有在卡片宽度小于画布宽度时才移动。

if((myCard.x + myCard.width) < canvas.width){
    //Put movement code here
}

注意：默认的热像素是图像上的左上角像素。

Javascript动画速度

3 个答案: