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. GIMP类似于PhotoShop的开源免费软件

    首先我们先看看他的界面如何,都有哪些功能!而且它支持多种平台,可以在MacOS.Windows.Linux操作系统上使用.非常值得推荐! ​ 1.官方地址下载地址: https://www.gimp. ...

  2. Linux-批量添加用户stu01..stu03,并设置固定的密码123456 (要求不能使用循环for while)

    最终目标: useradd stu01;echo 123456|passwd --stdin stu01 useradd stu02;echo 123456|passwd --stdin stu02 ...

  3. 【Henu ACM Round#19 D】 Points on Line

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑l..r这个区间. 且r是满足a[r]-a[l]<=d的最大的r 如果是第一个找到的区间,则直接累加C(r-l+1,3); ...

  4. java钩子函数

    也不知道我理解的对不对,欢迎大家讨论! 自己写了个钩子函数,我理解的钩子函数: public interface Transactioner { String wedontknow() ; } pub ...

  5. List和iterator的区别

    (1)在用Query方法查询的时候,通过HQL语句来得到Query对象,并对Query对象进行操作,首先是用list方法获取到Query的List集合并输出 public void listQuery ...

  6. Docker Network Configuration 高级网络配置

    Network Configuration TL;DR When Docker starts, it creates a virtual interface named docker0 on the ...

  7. JWT Authentication Tutorial: An example using Spring Boot--转

    原文地址:http://www.svlada.com/jwt-token-authentication-with-spring-boot/ Table of contents: Introductio ...

  8. 【基础篇】activity生命周期及数据保存

    常见的Android 的界面,均采用Activity+view的形式显示的,一提到Activity,立即就能联想到Activity的生命周期与状态的保存. 下面先从Activity的生命周期开始说起  ...

  9. org.xml.sax.SAXParseException: Content is not allowed in prolog

    sax错误:org.xml.sax.SAXParseException: Content is not allowed in prolog解决  标签: org. xml. sax. saxparse ...

  10. Huawei设备配置系统时钟

    系统时钟是设备上的系统时间戳.由于地域的不同,用户可以根据当地规定设置系统时钟.用户必须正确设置系统时钟以确保其与其他设备保持同步.华为设备出厂时默认采用了协调世界时(UTC),但是没有配置时区所有在 ...