我有一个简单的 Canvas 动画:两个矩形向两个不同的方向移动。但是,我觉得这可以进一步简化。
http://jsfiddle.net/tmyie/R5wx8/6/
var canvas = document.getElementById('canvas'),
c = canvas.getContext('2d'),
x = 10,
y = 15,
a = 20,
b = 50;
function move() {
c.clearRect(0, 0, 500, 300);
c.fillRect(0, y, 5, 5),
c.fillRect(b, 5, 15, 15);
x++;
y++;
b++
if (y > canvas.height || x > canvas.width) {
y = 0;
x = 0;
}
}
setInterval(move, 100);
例如,如果我想创建另外三个形状会怎样?目前,我必须为每个坐标创建更多变量:
x++;
y++;
b++
有没有办法将每个矩形变成它自己的对象?
最佳答案
你当然可以把它们变成对象,例如:
function Rect(x, y, w, h, dltX, dltY, color) {
var me = this;
this.x = x;
this.y = y;
this.width = w;
this.height = h;
this.deltaX = dltX || 0; /// and deltas can be optional
this.deltaY = dltY || 0;
this.color = color || '#000'; /// color is optional
this.update = function(ctx) {
me.x += me.deltaX;
me.y += me.deltaY;
ctx.fillStyle = me.color;
ctx.fillRect(me.x, me.y, me.width, me.height);
}
}
deltaX
和 deltaY
是每次更新时您希望将矩形移动多少。例如,如果将它们设置为 1,则每次调用 update()
时,x
和 y
都会增加 1。
使用增量可以很容易地创建反弹(见下面的演示),只需反转增量值(即 delta = -delta
)以及诸如加速度、可变速度之类的东西,你可以通过三 Angular 函数为它们提供数据,让物体以特定 Angular 移动等等。
如果您愿意,您可以使用固定值,但您会发现增量从长远来看是有益的(引用评论:它实际上是一种非常经典的方法,例如第一个 Pong 游戏 :-))。
Online demo here
现在我们已经定义了对象,我们可以简单地创建它的实例并将它们存储在一个数组中:
var rects = [
new Rect(10, 10, 100, 100, 1, -2),
new Rect(100, 1, 50, 50, 2, 1, '#f00'),
...
]
从这里开始,只需迭代数组来更新每个对象:
function move() {
ctx.clearRect(0, 0, width, height);
for(var i = 0, r; r = rects[i]; i++) {
/// check any conditions here
r.update(ctx);
}
requestAnimationFrame(move);
}
requestAnimationFrame(move); /// start loop
关于javascript - 简单的 Canvas 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21338740/