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

HTML5 canvas draw multiple rectangles that move in the canvas

本文关键字：布中 移动 布绘制 绘制 HTML5      更新时间：2023-09-26

在这段代码中，我有一个矩形从左中向右移动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;
        }

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

我给你留了一个改进，当所有的矩形都离开可见的画布时停止动画

这就是OOP(面向对象编程)的意义所在，其中程序中的每个项都表示为对象。在你的例子中，我们可以有一个Square对象，它有:x, y，宽度和颜色。随着一个功能来绘制自己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;
    }
}

然后你可以很容易地创建对象，动画每一个放置在一个数组中，并调用anim()在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);
<<p> 小提琴例子/strong>
相关文章：