2019-01-23 19:57:38

挂一个比较简单的一个canvas应用，利用CPU进行粒子实时计算，直接面向过程写的

帧动画：浏览器在下一个动画帧安排一次网页重绘,  requestAnimationFrame 是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

         <style type="text/css">

             *{

                 margin: 0;

                 padding: 0;

             }

             #canvas{

                 background: #000;

                 display: block;

             }

         </style>

     </head>

     <body>

         <canvas id="canvas" width="500" height="500"></canvas>

             <script type="text/javascript">

                 window.requestAnimFrame = (function() {

                     return  window.requestAnimationFrame ||

                         window.webkitRequestAnimationFrame ||

                         window.mozRequestAnimationFrame    ||

                         function(callback){

                             window.setTimeout(callback, 1000 / 60);

                         };

                 })();//帧动画

                 var canvas=document.getElementById("canvas");

                 var cxt=canvas.getContext("2d");

                 var w,h;

                 var num=200;

                 var data=[];

                 var move=[];

                 init();

                 //初始化位置

                 function init(){

                     w=canvas.width=window.innerWidth;

                     h=canvas.height=window.innerHeight;

                     for(var i=0;i<num;i++)//每个粒子都有自己的角度,从始至终一直是初始化的这个

                     {//随机取得一个坐标以及方向增量

                         data[i]={x:Math.random()*w,y:Math.random()*h,cx:Math.random()*0.6-0.3,cy:Math.random()*0.6-0.3};

                         circle(data[i].x,data[i].y);//画点

                     }

                 }

                 function circle(x,y){

                     cxt.save();

                     cxt.fillStyle="pink";

                     cxt.beginPath();

                     cxt.arc(x,y,0.5,Math.PI*2,false);

                     cxt.closePath();

                     cxt.fill();

                     cxt.restore();

                 }

                 !function draw(){//循环自执行

                     cxt.clearRect(0,0,w,h);//清除画布

                     for(var i=0;i<num;i++)

                     {

                         data[i].x+=data[i].cx;//位移

                         data[i].y+=data[i].cy;

                         if(data[i].x>w||data[i].x<0)data[i].cx=-data[i].cx;//边界反弹

                         if(data[i].y>h||data[i].y<0)data[i].cy=-data[i].cy;

                         circle(data[i].x,data[i].y);

                         for(var j=i+1;j<num;j++)//寻找距离较小的点(i+1握手原理)

                         {

                             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)

                                 line(data[i].x,data[i].y,data[j].x,data[j].y);

                         }

                         if(move.x)//鼠标跟随

                         {

                             if((data[i].x-move.x)*(data[i].x-move.x)+(data[i].y-move.y)*(data[i].y-move.y)<=100*100)

                                 line(data[i].x,data[i].y,move.x,move.y);

                         }

                     }

                     window.requestAnimFrame(draw);

                     /* setInterval(function(){

                         draw();

                     },13); */

                     //定时器会卡顿,所以不用

                 }();

                 function line(x1,y1,x2,y2){

                     var color=cxt.createLinearGradient(x1,y1,x2,y2);//设置渐变线颜色

                     color.addColorStop(0,"yellow");

                     color.addColorStop(0.5,"red");

                     color.addColorStop(1,"yellow");

                     cxt.save();

                     cxt.strokeStyle=color;

                     cxt.beginPath();

                     cxt.moveTo(x1,y1);//起点

                     cxt.lineTo(x2,y2);

                     cxt.stroke();

                     cxt.restore();

                 }

                 document.onmousemove=function(e){

                     move.x=e.clientX;

                     move.y=e.clientY;

                 }

             </script>

     </body>

 </html>

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

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

效果：（350）

【canvas】跟随鼠标的星空连线的更多相关文章

  1. Canvas跟随鼠标炫彩小球

    跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思 实现效果 超级炫酷 实现原理 创建小球 给小球添加随机颜色,随机半径 鼠标移动通过实例化,新增小球 通过调用给原型新增的方法,来实现小球的动画 ...

  2. canvas实现粒子星空连线

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>离 ...

  3. canvas实现跟随鼠标旋转的箭头

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  4. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

  5. WPF 跟随鼠标动画 by wgscd

    WPF 跟随鼠标动画 by wgscd <UserControl x:Class="WpfApplication1.Spark" xmlns="http://sch ...

  6. JS打造的跟随鼠标移动的酷炫拓扑图案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效

    今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...

  8. Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

    Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...

  9. WIN32进阶必备:跟随鼠标移动的子窗口

    上两张Demo的图,方便朋友们选择是否继续看文章. 在子窗口的白色区域按下鼠标左键不放并移动鼠标可以拖拽子窗口跟随鼠标移动. 选择继续看下去的朋友不要担心,接下来就是正文了. PART 1:Demo功 ...

随机推荐

  1. CSS命令

    border-bottom-right-radius: 10px;/* 文本框的角的弯曲度*/ border-bottom-left-radius: 10px; border-top-left-rad ...

  2. struts2文件过滤拦截器fileUpload以及各种文件类型

    本文某些内容复制自:http://zhidao.baidu.com/link?url=F0Z-FqbZ83BOj_xXp_B8rgJDzUoeVSWGgXwPNP5fEdLU1nvBK7yO4vnX_ ...

  3. openssl之BIO系列之6---BIO的IO操作函数

    BIO的IO操作函数     ---依据openssl doc/crypto/bio/bio_read.pod翻译和自己的理解写成          (作者:DragonKing Mail:wzhah ...

  4. 炜煌E30 E31微型热敏打印机 STM32 串口驱动

    设置为汉字模式 十六进制 命令:1C    26 USART_SendData(USART2,0x1C); while(USART_GetFlagStatus(USART2,USART_FLAG_TC ...

  5. iOS开发之软键盘使用小技巧

    在iOS开发过程中,有时候须要弹出软键盘进行输入,有时候又须要在某些情况下隐藏软键盘,以提高用户体验. 今天有几个关于软键盘的小技巧和大家分享. (1)仅仅弹出数字键盘 有某些需求中,要求用户仅仅能在 ...

  6. cocos2d-x 3.0正式版 vs2013配置

    cocos2d-x 3.0正式版与之前的版本号差异较大,曾经的教程非常多都不使用了. 1.从cocos2d-x官网http://www.cocos2d-x.org下载3.0版的压缩包,随便解压一个位置 ...

  7. netsh http的使用

    1.首先通过cmd进入 C:\Windows\System32\inetsrv>netshnetsh>http netsh http> 退出的时候,使用exit命令 2.显示监听的i ...

  8. && 的用法

    document.body.style.display === "" && (document.body.style.display = "none&qu ...

  9. ajax处理错误（六）

    使用ajax时必须留心两类错误,他们之间的区别源于视角不同. 一.第一类错误是从XMLHttpRequest对象的角度看到的问题:某些因素阻例如止了请求发送到服务器,例如DNS无法解析主机名,连接请求 ...

  10. tac---反转输出文件

    tac命令用于将文件已行为单位的反序输出,即第一行最后显示,最后一行先显示.