画布中一组对象的 setInterval答案

【问题标题】：setInterval on group of objects in canvas画布中一组对象的 setInterval
【发布时间】：2014-02-20 22:32:45
【问题描述】：

你好 :) 我花了很多时间来弄清楚如何实现我的代码。我在数组中有一组对象（随机矩形）。我想让它们像一个物体一样从左到右和从右到左同时移动。但在一切之前，我不知道如何让它们作为一个物体移动......任何帮助将不胜感激。谢谢。

<html>
       <head>
           <meta charset="utf-8" />
           <title>Canvas Demo</title>
           <script>
               window.onload = function () {

                      function Shape(x, y, w, h, fill) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.fill = fill;
}

// get canvas element.
var elem = document.getElementById('paper');

// check if context exist
if (elem.getContext) {

    var myRect = [];

    myRect.push(new Shape(10, 0, 25, 25, "#333"));
    myRect.push(new Shape(0, 40, 39, 25, "#333"));
    myRect.push(new Shape(0, 80, 100, 25, "#333"));

    context = elem.getContext('2d');
    for (var i in myRect) {
        oRec = myRect[i];
        context.fillStyle = oRec.fill;
        context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h);

    }

}
 var posX= 0;
                      setInterval( function(){



                            posX +=1;
        oRec = myRect[i];
        context.fillStyle = oRec.fill;
        context.fillRect(oRec.posX, oRec.y, oRec.w, oRec.h);
}, 40); };

           </script>
           <style>
           </style>
       </head>


       <body>
           <canvas id="paper" width="500" height="500">
           </canvas>
       </body> 
</html>

【问题讨论】：

标签： javascript html animation canvas setinterval

【解决方案1】：

您需要更新对象本身的属性。现在您正在更新未附加到任何对象的 posX。例如尝试：

Live demo

setInterval( function(){

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

    /// iterate object array and move all objects
    for(var i = 0, oRec; oRec = myRect[i]; i++) {
        oRec.x++;  /// update each object's position
        context.fillStyle = oRec.fill;
        context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h);
    }
}, 40);

您还应该考虑使用计数器迭代您的数组，而不是使用键（这很慢），如此处所示。数组 push() 之后的第一个循环块不是必需的，可以删除。

我还建议您使用requestAnimationFrame 而不是setInterval()。

Here's a version 使用 rAF（为了完整性）。

【讨论】：

好的，谢谢。我将更改 requestAnimationFrame 上的 setInterval。我的矩形也消失在画布外的某个地方。我可以制作 if 条件，以便矩形进入画布的右侧直到某个坐标并从右侧返回到左侧，对吗？附：我是画布新手，对不起。 @肯
@user3247903 没问题，我们随时为您提供帮助！条件应该可以解决问题。如果要切换方向，也可以使用 delta 值。看看这个答案是否有帮助：stackoverflow.com/questions/21338740/simply-canvas-animation/…

【解决方案2】：

我不知道你想制作什么动画。

无论如何我对你的代码做了一点改动：

function Shape(x, y, w, h, fill) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.fill = fill;
}
var elem=document.getElementById('paper'),myRect=[],context,posX=0;
if(elem.getContext){
 myRect.push(new Shape(10, 0, 25, 25, "#333"));
 myRect.push(new Shape(0, 40, 39, 25, "#333"));
 myRect.push(new Shape(0, 80, 100, 25, "#333"));
 context=elem.getContext('2d');
}
function animate(){
 context.clearRect(0,0,context.canvas.width,context.canvas.height);
 posX++;
 var i=myRect.length;
 while(i--){
  var oRec=myRect[i];
  context.fillStyle=oRec.fill;
  context.fillRect(oRec.x+posX, oRec.y, oRec.w, oRec.h);
 }
 webkitRequestAnimationFrame(animate);//delete if you use setinterval
}
//setInterval(animate,1000);
webkitRequestAnimationFrame(animate);//delete if you use setinterval

如您所见，我使用的是requestAnimationFrame。这优于 setInterval 或 setTimeout。我还创建了一个自定义函数来为这些东西设置动画......你可以随心所欲地改变它。

如果您有任何问题，请尽管提出。

演示

http://jsfiddle.net/SqDx9/1/

顺便说一句，如果你不为超过 100 个形状设置动画，你应该使用 css ...它更简单。

示例

http://jsfiddle.net/4eujG/

【讨论】：