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. git提交的规范

  2. Unity Shader （五）Surface Shader示例

    1.替换颜色 Shader "Custom/Example_Frag_5" { Properties { _MainTex ("Albedo (RGB)", 2 ...

  3. hadoop1.0.3学习笔记

    回 到 目 录 最近要从网上抓取数据下来,然后hadoop来做存储和分析. 呆毛王赛高 月子酱赛高 小唯酱赛高 目录 安装hadoop1.0.3 HDFS wordcount mapreduce去重 ...

  4. Mac系统下安装ant

    看了一些别人怎么在mac下安装ant,大体都是从官网下载bin文件,然后改动权限,建链接.配path. 须要这么麻烦吗?我认为不须要. 以下一个命令搞定: forlong401:build forlo ...

  5. java 爬虫在 netbeans 里执行和单独执行结果不一样

    在做内容測试的时候.发现我的爬虫(前些文章略有提及)在 netbeans 里面可以成功爬取网页内容,而单独执行时,给定一个 url,爬到的网页却与在浏览器里面打开 url 的网页全然不一样,这是一个非 ...

  6. 推荐一款优雅的jquery手风琴特效

    推荐一款基于 jQuery和 CSS3实现的手风琴效果. 查看demo演示

  7. POJ 1887 Testingthe CATCHER (LIS:最长下降子序列)

    POJ 1887Testingthe CATCHER (LIS:最长下降子序列) http://poj.org/problem?id=3903 题意: 给你一个长度为n (n<=200000) ...

  8. JAVA 解析复杂的json字符串

    转自:https://blog.csdn.net/lovelovelovelovelo/article/details/73614473String parameter = { success : 0 ...

  9. PHP开源网

    网站地址http://www.cnblogs.com/huijieoo/

  10. c#时间差高精度检查

    两个时间差的高精度检查 static void Main(string[] args) { Console.WriteLine("开始时间:" + DateTime.Now.ToS ...