【www.bbyears.com--php函数】
模拟球形的脉冲运动。
小球的构造函数如下：
// 圆球的构造函数
function Ball(radius, color) {
if(radius === undefined) { radius = 40; }
if(color === undefined) { color = "#ff0000"; }
this.x = 0;
this.y = 0;
this.radius = radius;
this.rotation = 0;
this.scaleX = 1;
this.scaleY = 1;
this.color = color;
this.lineWidth = 1;
}
Ball.prototype.draw = function(context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.scale(this.scaleX, this.scaleY);
context.lineWidth = this.lineWidth;
context.fillStyle = this.color;
context.beginPath();
context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
context.closePath();
context.fill();
if(this.lineWidth > 0) {
context.stroke();
}
context.restore();
}
二. 思路分析：
使用正弦值改变球形的比例，即可制造出脉冲效果。
如下：
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
ball = new Ball(),
angle = 5,
centerScale = 1,
range = 0.5,
speed = 0.05;
ball.x = canvas.height / 2;
ball.y = canvas.height / 2;
ball.lineWidth = 0;
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;
angle += speed;
ball.draw(context);
})();