Fatal编程技术网
  • javascript/
  • Javascript 画布中对象组的设置间隔

Javascript 画布中对象组的设置间隔

javascript html animation canvas

Javascript 画布中对象组的设置间隔,javascript,html,animation,canvas,setinterval,Javascript,Html,Animation,Canvas,Setinterval,您好：）我花了很多时间研究如何实现我的代码。我在数组中有一组对象（随机矩形）。我想让它们像一个物体一样从左到右，从右到左同时移动。但在一切发生之前，我不知道如何使它们作为一个物体移动。。。。任何帮助都将不胜感激。多谢各位 <html> <head> <meta charset="utf-8" /> <title>Canvas Demo</title> <

您好：）我花了很多时间研究如何实现我的代码。我在数组中有一组对象（随机矩形）。我想让它们像一个物体一样从左到右，从右到左同时移动。但在一切发生之前，我不知道如何使它们作为一个物体移动。。。。任何帮助都将不胜感激。多谢各位

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


画布演示
window.onload=函数（）{
函数形状（x、y、w、h、填充）{
这个.x=x；
这个。y=y；
这个.w=w；
这个，h=h；
this.fill=填充；
}
//获取画布元素。
var elem=document.getElementById（'paper'）；
//检查上下文是否存在
if（elem.getContext）{
var myRect=[]；
myRect.push（新形状（10,0,25,25，#333”）；
myRect.push（新形状（0,40,39,25，#333”）；
myRect.push（新形状（0,80,100,25，#333”）；
context=elem.getContext（'2d'）；
for（myRect中的变量i）{
oRec=myRect[i]；
context.fillStyle=oRec.fill；
context.fillRect（oRec.x，oRec.y，oRec.w，oRec.h）；
}
}
var-posX=0；
setInterval（函数（）{
posX+=1；
oRec=myRect[i]；
context.fillStyle=oRec.fill；
context.fillRect（oRec.posX、oRec.y、oRec.w、oRec.h）；
}, 40); };
您需要更新对象本身的属性。现在您正在更新未附加到任何对象的posX。请尝试以下示例：

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

我还建议您使用
requestAnimationFrame
而不是
setInterval（）

使用rAF（为了完整性）。

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

无论如何，我对您的代码做了一些更改：

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
。这比设置间隔或设置超时要好。 我还创建了一个自定义函数来制作动画。。你可以随意改变

如果你有任何问题，尽管问

演示

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

示例

好的，谢谢。我将更改requestAnimationFrame上的设置间隔。我的矩形也消失在画布之外的某个地方。我可以做一个if条件，使矩形在画布的右边，直到一些坐标，然后从右边回到左边，对吗？顺便说一句，对不起，我是画布新手@Ken@user3247903没问题，我们是来帮忙的！一个条件应该起作用。如果要切换方向，也可以使用增量值。看看这个答案是否有帮助： 
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