【canvas】跟随鼠标的星空连线

 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>
View Code

 后来看到一些人说依赖于GPU实现效果会更好。。。学到的时候再说（逃）

先把博客贴这里：https://www.cnblogs.com/wanbo/p/6869175.html

效果：（350）

posted @ 2019-01-23 19:32  flyf000  阅读(1079)  评论(0)  编辑  收藏  举报