2019-01-23 19:57:38
掛一個比較簡單的一個canvas應用，利用CPU進行粒子實時計算，直接面向過程寫的
幀動畫：瀏覽器在下一個動畫幀安排一次網頁重繪, requestAnimationFrame 是由瀏覽器專門為動畫提供的API，在運行時瀏覽器會自動優化方法的調用，並且如果頁面不是激活狀態下的話，動畫會自動暫停，有效節省了CPU開銷。把每一幀中的所有 DOM 操作集中起來，在一次重繪或回流中就完成，並且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #canvas{ 12 background: #000; 13 display: block; 14 } 15 </style> 16 </head> 17 <body> 18 <canvas id="canvas" width="500" height="500"></canvas> 19 <script type="text/javascript"> 20 window.requestAnimFrame = (function() { 21 return window.requestAnimationFrame || 22 window.webkitRequestAnimationFrame || 23 window.mozRequestAnimationFrame || 24 function(callback){ 25 window.setTimeout(callback, 1000 / 60); 26 }; 27 })();//幀動畫 28 var canvas=document.getElementById("canvas"); 29 var cxt=canvas.getContext("2d"); 30 var w,h; 31 var num=200; 32 var data=[]; 33 var move=[]; 34 init(); 35 //初始化位置 36 function init(){ 37 w=canvas.width=window.innerWidth; 38 h=canvas.height=window.innerHeight; 39 for(var i=0;i<num;i++)//每個粒子都有自己的角度,從始至終一直是初始化的這個 40 {//隨機取得一個坐標以及方向增量 41 data[i]={x:Math.random()*w,y:Math.random()*h,cx:Math.random()*0.6-0.3,cy:Math.random()*0.6-0.3}; 42 circle(data[i].x,data[i].y);//畫點 43 } 44 } 45 function circle(x,y){ 46 cxt.save(); 47 cxt.fillStyle="pink"; 48 cxt.beginPath(); 49 cxt.arc(x,y,0.5,Math.PI*2,false); 50 cxt.closePath(); 51 cxt.fill(); 52 cxt.restore(); 53 } 54 !function draw(){//循環自執行 55 cxt.clearRect(0,0,w,h);//清除畫布 56 for(var i=0;i<num;i++) 57 { 58 data[i].x+=data[i].cx;//位移 59 data[i].y+=data[i].cy; 60 if(data[i].x>w||data[i].x<0)data[i].cx=-data[i].cx;//邊界反彈 61 if(data[i].y>h||data[i].y<0)data[i].cy=-data[i].cy; 62 circle(data[i].x,data[i].y); 63 for(var j=i+1;j<num;j++)//尋找距離較小的點(i+1握手原理) 64 { 65 if((data[i].x-data[j].x)*(data[i].x-data[j].x)+(data[i].y-data[j].y)*(data[i].y-data[j].y)<=80*80) 66 line(data[i].x,data[i].y,data[j].x,data[j].y); 67 } 68 if(move.x)//鼠標跟隨 69 { 70 if((data[i].x-move.x)*(data[i].x-move.x)+(data[i].y-move.y)*(data[i].y-move.y)<=100*100) 71 line(data[i].x,data[i].y,move.x,move.y); 72 } 73 74 } 75 window.requestAnimFrame(draw); 76 /* setInterval(function(){ 77 draw(); 78 },13); */ 79 //定時器會卡頓,所以不用 80 }(); 81 function line(x1,y1,x2,y2){ 82 var color=cxt.createLinearGradient(x1,y1,x2,y2);//設置漸變線顏色 83 color.addColorStop(0,"yellow"); 84 color.addColorStop(0.5,"red"); 85 color.addColorStop(1,"yellow"); 86 cxt.save(); 87 cxt.strokeStyle=color; 88 cxt.beginPath(); 89 cxt.moveTo(x1,y1);//起點 90 cxt.lineTo(x2,y2); 91 cxt.stroke(); 92 cxt.restore(); 93 } 94 document.onmousemove=function(e){ 95 move.x=e.clientX; 96 move.y=e.clientY; 97 } 98 99 </script> 100 </body> 101 </html>
后來看到一些人說依賴於GPU實現效果會更好。。。學到的時候再說（逃）
先把博客貼這里：https://www.cnblogs.com/wanbo/p/6869175.html
效果：（350）
