Canvas学习笔记——动画环境中的边界

在动画中经常要处理边界问题，比如一个物体运动到了边界，要怎么处理才合适呢？通常有几种以下几种方式：

让物体消失

// > 16 & 0xff,
g = color >> 8 & 0xff,
b = color >> 0xff,
a = (alpha 1) ? 1 : alpha);

if(a === 1) {
return 'rgb('+r+','+g+','+b+')';
} else {
return 'rgba('+r+','+g+','+b+','+a+')';
}
};

window.utils.parseColor = function (color, toNumber) {
if (toNumber === true) {
if (typeof color === 'number') {
return (color | 0); //chop off decimal
}
if (typeof color === 'string' && color[0] === '#') {
color = color.slice(1);
}
return window.parseInt(color, 16);
} else {
if (typeof color === 'number') {
color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); //pad
}
return color;
}
};

window.utils.containsPoint = function (rect, x, y) {
return !(x rect.x + rect.width ||
y rect.y + rect.height);
};

window.utils.intersects = function (rectA, rectB) {
return !(rectA.x + rectA.width 0) {
ctx.stroke();
}
ctx.restore();
};

function Ship () {
this.x = 0;
this.y = 0;
this.width = 25;
this.height = 20;
this.rotation = 0;
this.showFlame = false;
}

Ship.prototype.draw = function (ctx) {
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);

ctx.lineWidth = 1;
ctx.strokeStyle = "#ffffff";
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(-10, 10);
ctx.lineTo(-5, 0);
ctx.lineTo(-10, -10);
//ctx.lineTo(10, 0);
ctx.closePath();
ctx.stroke();

if (this.showFlame) {
ctx.beginPath();
ctx.moveTo(-7.5, -5);
ctx.lineTo(-15, 0);
ctx.lineTo(-7.5, 5);
ctx.stroke();
}
ctx.restore();
};
// ]]>

 

// canvas.width ||
ball.x + ball.radius canvas.height ||
ball.y + ball.radius 0) {
console.log("Removed " + ball.id);
} else {
console.log("All clear");
window.cancelRequestAnimationFrame(requestId);
}
}

ball.draw(ctx);
}

(function () {
requestId = window.requestAnimFrame(arguments.callee,canvas);
ctx.clearRect(0,0,canvas.width,canvas.height);
console.log('is running');
var i = balls.length;
while(i--) {
draw(balls[i],i);
}
})();
})();
// ]]>

这里的让物体消失并不是单纯的让物体移动出边界，而是将物体销毁，即从数组中移除。

重置物体

 

// canvas.width ||
ball.x + ball.radius canvas.height ||
ball.y + ball.radius

重置物体是指让物体回到初始的位置继续执行动画，这样就能够在不销毁物体或中断动画的情况下持续看到动画效果，也提升了性能。

屏幕环绕

 

// right) {
ship.x = left - ship.width / 2;
} else if(ship.x + ship.width / 2 bottom) {
ship.y = top - ship.height / 2;
} else if(ship.y + ship.height / 2

尝试用方向键改变物体的位置，可以发现物体在移出边界的同时又出在边界的另一侧，这样物体永远不会从屏幕中消失。

反弹

 

// right) {
ball.vx *= bounce;
ball.x = right - ball.radius; //将小球位置硬编码为固定位置
} else if(ball.x - ball.radius bottom) {
ball.vy *= bounce;
ball.y = bottom - ball.radius;
} else if(ball.y - ball.radius

反弹比较符合现实中的物理效果，需要注意其中的动能损耗。