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. grvphviz && dot脚本语言

    安装graphviz 可去官网下载http://www.graphviz.org/download/下载之后按步骤安装 打开编辑器,创建*.dot文件,编辑dot脚本代码,保存. D:\>dot ...

  2. 解决高版本vm打开虚拟机报错

    问题: 打开虚拟机的文件目录,找到.vmx 文件 用记事本打开重命名后的“.vmx.txt”文件 找到行:policy.vm.mvmtid = "52 10 08 ed ff 34 ed d ...

  3. 2019 前端面试题汇总（主要为 Vue）

    原文链接:点我 由于我的技术栈主要为Vue,所以大部分题目都是Vue开发相关的. 1. 谈谈你对MVVM开发模式的理解 MVVM分为Model.View.ViewModel三者. Model:代表数据 ...

  4. P3514 [POI2011]LIZ-Lollipop（规律+瞎搞）

    题意 给一个只有1和2的序列,每次询问有没有一个子串的和为x ( 1≤n,m≤1 000 000 )kkk ( 1≤k≤2 000 000 ) 题解 我觉得是道好题. 主要是证明一个性质:假如有一个字 ...

  5. caioj 1072 动态规划入门（二维一边推5：最长公共子序列 LCSS加强版）

    在51nod刷到过同样的题,直接秒杀 见https://blog.csdn.net/qq_34416123/article/details/81697683 #include<cstdio> ...

  6. unity SystemInfo类 获得电量battery

    我觉得用Unity 开发最爽的地方, 不是unity跨平台,而是用其他语言,要用很复杂的逻辑才能完成的功能,unity用一两句代码就能搞定 就比如说获取Android 系统的电量,不用发广播,不用申请 ...

  7. ArcGIS api for javascript——地理处理任务-瓶中信

    描述 如果在海洋中丢下一个瓶子,本例使用颗粒追踪模型显示指定的天数后瓶子在的地方.首先,输入一个追踪瓶子的天数.然后单击按钮并在海洋里的任意地方画一个点来开始模型.几秒以后将看到一条线出现描述瓶子将去 ...

  8. ArcGIS api for javascript——鼠标悬停时显示信息窗口

    描述 本例展示当用户在要素上悬停鼠标时如何显示InfoWindow.本例中,要素是查询USA州图层的QueryTask的查询结果.工作流程如下: 1.用户单击一个要素 2.要素是“加亮的”图形. 3. ...

  9. 常量成员函数的注意事项 & mutable的使用场景

    mutable的使用场景: 可以在一个const的对象里面,解除对部分字段的const限制.也可以用在const成员函数里面. 对于const与否,一般会调用不同版本的函数: 而对于二元操作符,如果用 ...

  10. CSU1608: Particle Collider(后缀数组)

    Description In the deep universe, there is a beautiful planet named as CS on which scientists have d ...