HTML5画布绘制在画布中移动的多个矩形

Question

在这个代码中,我有一个从中间左边移动到30tt的矩形,然而,当我试图想要如何添加另一个与反对的大小相同的方块时,我的大脑会受伤,但是从不同的方向开始方向.问题是我如何添加多个对象,无论是矩形圆形还是像另一个起始xy位置的方形一样有动画,这是我到目前为止所拥有的:

        var rectY=200, rectW=40;
        var rectX = -rectW;
        var canvas = null;
        var context = null;

        function init() {
            canvas = document.getElementById('testCanvas');
            context = canvas.getContext("2d");

            blank();

            context.fillStyle= "yellow";
            context.fillRect(rectX,rectY,rectW,rectW);
            setInterval(anim, 30);
        }

        function blank() {
            context.fillStyle = "#00ddee";
            context.fillRect(0,0,context.canvas.width, context.canvas.height);
        }

        function anim() {
            if (rectX < context.canvas.width) {
                blank();
                rectX += 5;
                context.fillStyle = "yellow";
                context.strokeStyle = "red";
                context.lineWidth = 3;
                context.fillRect(rectX,rectY,rectW,rectW);
                context.strokeRect(rectX,rectY,rectW,rectW);
            }
            else rectX=-rectW;
        }

Answer 1

使用JavaScript对象表示多个矩形

以下是如何操作的概述:

• 使用javascript对象来描述每个矩形
• 将每个rect对象放在rects []数组中
• 在动画循环内:
  • 更改每个rect的x值
  • 用新的位置重新绘制画布
  • 请求动画中的另一个循环

带注释的代码和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// define a rect using a javascript object
var rect1={
  x:20,
  y:20,
  width:40,
  height:40,
  directionX:1
}

// define another rect using a javascript object
var rect2={
  x:250,
  y:90,
  width:40,
  height:40,
  directionX:-1
}

// put each rect in a rects[] array
var rects=[rect1,rect2];

// start the animation loop
requestAnimationFrame(animate);

function animate(time){

  // move each rect in the rects[] array by its 
  // own directionx
  for(var i=0;i<rects.length;i++){
    rects[i].x+=rects[i].directionX;
  }

  // draw all the rects in their new positions
  draw();

  // request another frame in the animation loop
  requestAnimationFrame(animate);
}

function draw(){
  ctx.clearRect(0,0,cw,ch);
  for(var i=0;i<rects.length;i++){
    var r=rects[i]
    ctx.strokeRect(r.x,r.y,r.width,r.height);
  }
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

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

我留给你的改进是当所有矩形离开可见画布时停止动画.