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