最近用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>