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. ios发布以后关键信息确认与nslog

    发布以后信息查看的路径: xcode->window->devices and …->查看如图的log. 通常在发布以后,处于安全和性能的考虑,会禁止打印log:但是在关键的信息需要 ...

  2. PL/SQL恢复默认窗口样式

    对于初学者来讲,使用PL/SQL时会不小心将窗体关闭,如下图 2. 怎么恢复呢?其实很简单 3. 搞定 转自:http://blog.csdn.net/hello_word2/article/deta ...

  3. [洛谷P1726][codevs1332]上白泽慧音

    题目大意:求一个有向图的最大强连通分量中点的个数,并输出这些点(字典序最小). 解题思路:裸的强连通分量. 数据小,求完强连通分量后排序+vector大小比较即可(vector有小于运算符). C++ ...

  4. 安装虚拟机（VM）(一)

    原创作品,允许转载,转载时请务必声明作者信息和本声明.  https://www.cnblogs.com/zhu520/p/10728248.html 本人小白,有错指出.谢谢! 一:安装虚拟机前奏 ...

  5. js 异步加载的方式

    js 异步加载的方式 渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染 defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中 ...

  6. Varnish 问题点 与 技术方案 Varnish 优劣分析

      A10 有没有能做热点统计   1 Varnish 分布式 HA  (目前没有HA) 2 Varnish 热点监控     (建议热点需要外部插件统计,API的话目前并木有发现,但是他自带一个伪热 ...

  7. 使用commons-email发邮件

    这里我用到了两个包: commons-email-1.3.2.jar mail-1.4.1.jar 如果不加mail.jar,就可能会抛出NoClassDefFoundError异常 之后代码引用ht ...

  8. CountDownLatch &amp; CyclicBarrier源代码实现解析

    CountDownLatch CountDownLatch同意一条或者多条线程等待直至其他线程完毕以系列的操作的辅助同步器. 用一个指定的count值对CountDownLatch进行初始化. awa ...

  9. centos7;windows下安装和使用spice

    感谢朋友支持本博客,欢迎共同探讨交流,因为能力和时间有限,错误之处在所难免,欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  10. Android资源之图像资源（状态图像资源）

    在上一篇博文中.我主要解说了XML图像资源中的图层资源,在此图像资源博文中我会给大家陆续解说XMl图像资源的图像状态资源.图像级别资源.淡入淡出资源.嵌入图像资源.剪切图像资源和外形资源. 1.图像状 ...