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

在这段代码中，我有一个矩形从左中向右移动了30个刻度，然而，当我试图思考如何添加另一个与反目标大小相同但从不同方向开始的正方形时，我的大脑会受到伤害。问题是如何添加多个对象，无论是矩形还是圆形，并使其像另一个起始x y位置中的正方形一样进行动画，以下是我迄今为止所做的：

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

var rectY=200，rectW=40；
var rectX=-rectW；
var=null；
var-context=null；
函数init（）{
canvas=document.getElementById（'testCanvas'）；
context=canvas.getContext（“2d”）；
空白（）；
context.fillStyle=“黄色”；
fillRect（rectX，rectY，rectW，rectW）；
设定间隔（动画，30）；
}
函数blank（）{
context.fillStyle=“#00ddee”；
fillRect（0,0，context.canvas.width，context.canvas.height）；
}
函数anim（）{
if（rectX

使用JavaScript对象表示多个矩形

以下是如何做到这一点的概述：

• 使用javascript对象描述每个矩形
• 将每个rect对象放入rects[]数组中
• 在动画循环中：
  • 更改每个矩形的

    x

    值
  • 用矩形在新位置重新绘制画布
  • 请求动画中的另一个循环

注释代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//使用javascript对象定义rect
变量rect1={
x:20，
y:20，
宽度：40，
身高：40，
方向X:1
}
//使用javascript对象定义另一个rect
变量rect2={
x:250，
y:90，
宽度：40，
身高：40，
方向X:-1
}
//将每个rect放入rects[]数组中
var rects=[rect1，rect2]；
//启动动画循环
请求动画帧（动画）；
函数动画（时间）{
//将rects[]数组中的每个rect按其
//自己的方向
对于（var i=0；i，这是面向对象编程（Object-Oriented Programming）的要点，程序中的每个项目都表示为一个对象。在您的例子中，我们可以有一个
正方形
对象，该对象具有：x、y、宽度和颜色。以及一个绘制自身的函数
anim（）
：

哇，这对你自己来说太难了。使用
svg
容易多了。或者如果你只是在处理矩形，
div
s就可以了！至于移动，CSS动画呢？或者
jQuery
动画？或者其他js库呢？
function Square(x, y, w, color) 
{
    this.x = x;
    this.y = y;
    this.w = w;
    this.color = color;

    this.anim = function() 
    {
        if (this.x < context.canvas.width) {
            this.x += 5;
            context.fillStyle = this.color;
            context.strokeStyle = "red";
            context.lineWidth = 3;
            context.fillRect(this.x,this.y,this.w,this.w);
            context.strokeRect(this.x,this.y,this.w,this.w);
        }
        else this.x=-this.w;
    }
}

var rect1 = new Square(-40, 200, 40, "yellow");
var rect2 = new Square(0, 100, 40, "blue");
var objects = [ rect1, rect2 ];

setInterval(function(){
    blank();
    for(rect in objects){
        objects[rect].anim();
    }
}, 30);