html5画布里随机显示圆,HTML5 Canvas随机圆周运动

圆周运动的原理

圆周运动1.PNG

如上图所示，其实圆周运动，就是通过运动的角度deg来求出物体在x轴和y轴上运动的偏移量，分别为radius*Math.cos(deg)和radius*Math.sin(deg)。

了解了上述原理之后，就可以开始写一个随机圆周运动的DEMO，效果图如下

圆周运动.PNG

基本的设计思路

*利用面向对象的思想创建一个圆模型对象。

*再创建一个帧动画模型。

*创建实例，执行动画。

创建圆模型对象

将画圆形的x,y坐标、半径、初始角度、颜色、宽度等要素，封装在圆模型这个对象的构造函数里面，然后通过给原型添加方法，一个是draw画圆形的方法和move圆形运动的方法，让所有圆形的实例共享这些方法，还有自己相应的属性，这里用到了，构造函数模式和原型模式创建对象的方法思想。

var Square = function(x,y,radiu,option){

this.wid = canvas.width;

this.hei = canvas.height;

this.ctx = ctx;

this.x = x;

this.y = y;

this.radiu = radiu;

this.option = option;

this.radius = Math.random()*5 + 1;

this.angle = 0;//圆周运动的初始角度

};

Square.prototype = {

draw:function(){

this.ctx.beginPath();

this.ctx.strokeStyle = this.option.strokeStyle;

this.ctx.lineWidth = this.option.lineWidth;

this.ctx.arc(this.x,this.y,this.radiu,0,2*Math.PI,true);

this.ctx.stroke();

},

move:function(){

/*根据角度计算出x轴和y轴的偏移量*/

this.x += this.radius*Math.cos(this.angle*(Math.PI/180));

this.y += this.radius*Math.sin(this.angle*(Math.PI/180));

this.angle+=5;//角度每次递增5个像素

this.draw();

}

};

创建帧动画对象

同样的道理创建帧动画对象，并且增加一个存放圆实例的数组，每实例化一个圆形，就将它存到数组中，然后每次render渲染之前，都先把之前的画布清除掉，然后执行start方法循环地渲染画布，达到动画的效果。

var Far = function(){

this.width = canvas.width;

this.height = canvas.height;

this.ctx = ctx;

this.timer = null;

this.squares = [];//创建数组，用于存放圆实例

};

Far.prototype = {

//循环渲染

start : function(){

this.timer = setInterval((function(param){

return function(){param.render();}

})(this),30);

},

//渲染方法

render : function(){

/*将之前的画布清除掉*/

this.ctx.clearRect(0,0,canvas.width,canvas.height);

/*遍历每个圆实例，让这些圆角度发生变化，从而让运动轨迹发送变化*/

for(i in this.squares){

this.squares[i].move();

/*圆角度增加判断*/

if(this.squares[i].angle>360){

this.squares[i].angle = 0;

}

}

}

};

最后创建实例完成动画效果

/*创建帧实例*/

var frame = new Far();

/*创建圆实例*/

for(var i=0;i<500;i++){

/*圆的所有属性都是一定范围内的随机数*/

var x = Math.random()*(canvas.width);

var y = Math.random()*(canvas.height);

var radiu = Math.random()*20;

var r = Math.floor(Math.random()*256);

var g = Math.floor(Math.random()*256);

var b = Math.floor(Math.random()*256);

var a = Math.random();

var option = {

strokeStyle : 'rgba('+r+','+g+','+b+','+a+')',

lineWidth : Math.random()*10

};

//把圆实例放到帧模型的数组中

frame.squares[i] = new Square(x,y,radiu,option);

}

//开始渲染

frame.start();