在这段代码中,我有一个矩形以 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[] 数组中
- 在动画循环中:
- 改变每个矩形的
x
值 - 在新位置重新绘制 Canvas
- 在动画中请求另一个循环
- 改变每个矩形的
注释代码和演示:
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>
我留给你做的一个改进是当所有矩形都离开可见 Canvas 时停止动画。
关于javascript - HTML5 canvas 绘制多个在 Canvas 中移动的矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31736803/