canvas随机圆周运动（面向对象）-CSDN博客

　　最近用canvas做了一个很有立体效果的demo，拿出来跟大家分享一下！先看一下效果图

动态效果就是很多随机圆围绕自己的半径做圆周运动，一种很立体的感觉。

【效果要点】

1.js面向对象的方法构建这些圆模型

2.构建帧模型，让这些圆自己画到画布上并且运动

3.圆周运动的算法

4.创建圆实例和帧实例
接下来逐一分析

1.画圆的方面想必大家已经很熟悉了，我们创建一个通用的函数表达式，把画圆的起始位置，半径，一些外观属性（颜色、透明度）放到这个中，让创建的随机圆都继承这些属性，另外需要把圆周运动的初始角度也放到这里面，便于添加圆运动方法的时候更改角度，从而使位置改变（当然你也可以创建任意的随机角度，让这些圆的运动规律不一致）；我们把圆的运动和渲染放到这个函数表达式的原型链中，让每个圆都具备这些方法，创建圆模型代码：

View Code

 1 //创建园模型
 2 var Square=function(x,y,radiu,option){
 3     this.wid=canvas.width;
 4     this.hei=canvas.height;
 5     this.con=context;
 6     this.x=x;
 7     this.y=y;
 8     this.radiu=radiu;
 9     this.option=option;
10     this.radius=Math.random()*5+1;
11     this.angle=0;
12 }            
13 Square.prototype={
14     draw:function(){
15         this.con.beginPath();
16         this.con.strokeStyle=this.option.strokeStyle;
17         this.con.lineWidth=this.option.lineWidth;
18         this.con.arc(this.x,this.y,this.radiu,0,2*Math.PI,true);
19         this.con.stroke();
20     },
21     move:function(){
22         /*//根据角度计算出x轴和y轴的偏移量*/
23         this.x+=this.radius*Math.cos(this.angle*(Math.PI/180));
24         this.y+=this.radius*Math.sin(this.angle*(Math.PI/180));
25         this.angle+=5;
26         this.draw();//调用画方法，让圆自己画到画布上
27     }
28 }

2.创建帧模型的目的就是执行画的动作，需要注意的是每次画之前要清一下画布。这个效果中，循环调用圆的运动方法，在这之前需要不断更改角度，让圆的运动轨迹发生变化，在帧的函数表达式中需要创建一个数组，用于存放所有的圆实例，创建帧模型代码：

View Code

 1 //创建帧动画
 2 var Far=function(){
 3     this.width=canvas.width;
 4     this.height=canvas.height;
 5     this.context=context;
 6     this.sint=null;
 7     this.squares=[];//创建数组，用于存放圆实例
 8 }
 9 Far.prototype={
10     //循环渲染
11     star:function () {
12         this.sint=setInterval((function (param) {
13             return function () {param.render();}
14         })(this), 30)
15     },
16     //渲染方法
17     render:function () {
18         this.context.clearRect(0,0,canvas.width,canvas.height);
19         /*遍历每个圆实例，让这些圆的角度发生变化，从而让运动轨迹发生变化*/
20         for(i in this.squares){
21             this.squares[i].move();//调用圆的运动方法 
22             /*圆角度增加判断*/
23             if(this.squares[i].angle>360){
24                 this.squares[i].angle=0;
25                 //delete(this.squares[i]);
26             }
27         }
28     }
29 }

3.所谓圆周运动，其实是通过sin和cos根据圆的半径和角度计算出圆的x轴和y轴的偏移量，画一个图方便大家理解

由图可以看到，x轴的偏移量为radius*Math.cos(deg);y轴的偏移量为radius*Math.sin(deg),因为画圆的起始位置不同所以需要加上x,y的初始坐标：

View Code

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

4.接下来的工作就比较简单了，就是创建圆实例和帧实例，执行帧动画，分享一下全部的代码！

View Code

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>泡泡随机圆周运动</title>
  6 <meta name="keywords" content="">
  7 <meta name="description" content="">
  8 <style>
  9 body{margin:0;padding:0;background-color: #000;}
 10 
 11 </style>
 12 </head>
 13 <body>
 14 <canvas id="mycanvas" ></canvas>
 15 <script src="js/jQuery.js" type="text/javascript"></script>
 16 <script type="text/javascript">
 17 var canvas=document.getElementById('mycanvas');
 18 var context=canvas.getContext('2d');
 19 //获取整个显示屏宽高为canvas的大小
 20  canvas.width=$(window).width();
 21  canvas.height=$(window).height();
 22 //创建园模型
 23 var Square=function(x,y,radiu,option){
 24     this.wid=canvas.width;
 25     this.hei=canvas.height;
 26     this.con=context;
 27     this.x=x;
 28     this.y=y;
 29     this.radiu=radiu;
 30     this.option=option;
 31     this.radius=Math.random()*5+1;
 32     this.angle=0;
 33 }            
 34 Square.prototype={
 35     draw:function(){
 36         this.con.beginPath();
 37         this.con.strokeStyle=this.option.strokeStyle;
 38         this.con.lineWidth=this.option.lineWidth;
 39         this.con.arc(this.x,this.y,this.radiu,0,2*Math.PI,true);
 40         this.con.stroke();
 41     },
 42     move:function(){
 43         /*//根据角度计算出x轴和y轴的偏移量*/
 44         this.x+=this.radius*Math.cos(this.angle*(Math.PI/180));
 45         this.y+=this.radius*Math.sin(this.angle*(Math.PI/180));
 46         this.angle+=5;
 47         this.draw();//调用画方法，让圆自己画到画布上
 48     }
 49 }
 50 //创建帧动画
 51 var Far=function(){
 52     this.width=canvas.width;
 53     this.height=canvas.height;
 54     this.context=context;
 55     this.sint=null;
 56     this.squares=[];//创建数组，用于存放圆实例
 57 }
 58 Far.prototype={
 59     //循环渲染
 60     star:function () {
 61         this.sint=setInterval((function (param) {
 62             return function () {param.render();}
 63         })(this), 30)
 64     },
 65     //渲染方法
 66     render:function () {
 67         this.context.clearRect(0,0,canvas.width,canvas.height);
 68         /*遍历每个圆实例，让这些圆的角度发生变化，从而让运动轨迹发生变化*/
 69         for(i in this.squares){
 70             this.squares[i].move();//调用圆的运动方法 
 71             /*圆角度增加判断*/
 72             if(this.squares[i].angle>360){
 73                 this.squares[i].angle=0;
 74                 //delete(this.squares[i]);
 75             }
 76         }
 77     }
 78 }
 79 //创建帧实例
 80 var frame=new Far();
 81 //创建100个圆实例
 82 for(var i=0;i<100;i++){
 83     /*圆的所有属性都是一定范围内的随机数*/
 84     var x=Math.random()*(canvas.width);
 85     var y=Math.random()*(canvas.height);
 86     var radiu=Math.random()*20;
 87     var r=Math.floor(Math.random()*256);
 88     var g=Math.floor(Math.random()*256);
 89     var b=Math.floor(Math.random()*256);
 90     var a=Math.random();
 91     var option={
 92         strokeStyle:'rgba('+r+','+g+','+b+','+a+')',
 93         lineWidth:Math.random()*10
 94     }
 95     //把圆实例放到帧模型的数组中
 96     frame.squares[i]=new Square(x,y,radiu,option);
 97 }
 98 //开始渲染
 99 frame.star();
100 
101 </script>
102 </body>
103 </html>