Javascript动画速度

我偷了下面的代码，试图找出如何构建类似的东西。但是，我看不到哪里可以调整动画的速度。也就是说，此代码用于从左向右移动的图像，但移动太慢

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

更改您的window.setTimeoutcallback，1000/120；返回window.setTimeoutcallback，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();

});

退房

---

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

中的教程。如果您希望能够更改画布中的动画速度，则应更改window.requestAnimFrame函数。我已经为这种情况创建了一个新的方法，只要尝试更改setTimeOut方法的毫秒数，您就会看到：window.setTimeoutcallback，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();

}

改变

到

通过将x值每帧增加较大的量来加快移动速度：

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

为防止卡滑出视线，仅当卡小于画布宽度时才移动卡

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

---

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

非常感谢您的精彩表演，然而，上面的代码在一定的时间后是否会循环？@user3503682我更新了到jsfiddle的链接。请看：它现在考虑了加载的图像的宽度和高度，并停止在那里。好的，谢谢，但是我如何使其在20秒后循环？@user3503682这已经是一个不同的问题；但我为你们创建了一个例子：在这里，它保持在正确的位置，直到它再次启动。。或者，您可以将x和y移动到循环之外，以便它立即扭曲开始，如图所示：对于未来的改进，请提出新的问题：您希望我们向您解释所有这些代码，还是您有更具体的问题？我想你在同一代码中的问题已经在这里解决：@amoebe不太好，这个问题是关于加速画布上的动画元素，另一个是关于实现fpsHi的跨浏览器问题。谢谢，你做得很好。我怎样才能在20秒后让它循环呢？抱歉误会了。。但是你想循环使用帧函数还是图像滑动？你能说得更具体些吗？我想循环图像滑动，因此每20秒它就会在屏幕上滑动一次：提前谢谢，很抱歉，这让人很痛苦，但可能不增加10秒加载延迟吗？请检查更新版本。它有10秒的延迟，并在完成上一个动画后每20秒重复一次。

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

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