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）
