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

Question

In this code i have a rectangle moving from the middle-left to the right at 30ticks, however, my brain hurts when i try to think how im going to add another square about the same size as the one antimated, but starting from a different direction. The issue is how i can add multiple objects, whether rectangle-circle and have it animate like the square in another starting xy location, here's what i have so far:

        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

Use JavaScript objects to represent multiple rectangles

Here's an outline of how to do it:

• Use a javascript object to describe each of your rectangles
• Put each rect object in a rects[] array
• Inside an animation loop:
  • Change each rect's x value
  • Redraw the canvas with the rects in their new positions
  • Request another loop in the animation

Annotated code and a Demo:

 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(rx,ry,r.width,r.height); } } 

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

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

An improvement I leave for you to do is to stop the animation when all rectangles have left the visible canvas.

Answer 2

This is the point of OOP (Object Orientated Programming), where each item in your program is represented as an object. In your case we can have a Square object that has a: x, y, width, and color. Along with a function to draw itself anim() :

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

Then you can easily create objects, to animate each one place them inside an array and call anim() for each square in objects :

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

Fiddle Example