匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的。
上述实例让一个半径20px的小球 从x=0, y=canvas高度的一半,以每帧2px的速度向右匀速运动.
我们可以把小球封装成一个对象:
ball.js文件:
function Ball( x, y, r, color ){
this.x = x || 0;
this.y = y || 0;
this.radius = r || 20;
this.color = color || '#09f';
}
Ball.prototype = {
constructor : Ball,
stroke : function( cxt ){
cxt.strokeStyle = this.color;
cxt.beginPath();
cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
cxt.closePath();
cxt.stroke();
},
fill : function( cxt ){
cxt.fillStyle = this.color;
cxt.beginPath();
cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
cxt.closePath();
cxt.fill();
}
}该小球对象,可以定制位置半径和颜色,支持两种渲染方式(描边和填充)
立即学习“前端免费学习笔记(深入)”;
斜线匀速运动:
任意方向的匀速运动(速度分解)











