【canvas】跟随鼠标的星空连线
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】跟随鼠标的星空连线的更多相关文章
- Canvas跟随鼠标炫彩小球
跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思 实现效果 超级炫酷 实现原理 创建小球 给小球添加随机颜色,随机半径 鼠标移动通过实例化,新增小球 通过调用给原型新增的方法,来实现小球的动画 ...
- canvas实现粒子星空连线
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>离 ...
- canvas实现跟随鼠标旋转的箭头
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...
- html5跟随鼠标炫酷网站引导页动画特效
html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...
- WPF 跟随鼠标动画 by wgscd
WPF 跟随鼠标动画 by wgscd <UserControl x:Class="WpfApplication1.Spark" xmlns="http://sch ...
- JS打造的跟随鼠标移动的酷炫拓扑图案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效
今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...
- Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现
Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...
- WIN32进阶必备:跟随鼠标移动的子窗口
上两张Demo的图,方便朋友们选择是否继续看文章. 在子窗口的白色区域按下鼠标左键不放并移动鼠标可以拖拽子窗口跟随鼠标移动. 选择继续看下去的朋友不要担心,接下来就是正文了. PART 1:Demo功 ...
随机推荐
- UVa 12661 Funny Car Racing【 dijkstra 】
题意:给出n个点,m条路,每条路用5个整数表示u,v,a,b,t u表示这条路的起点,v表示终点,a表示打开时间,b表示关闭时间,t表示通过这条道路需要的时间 看的紫书,因为边权不再仅仅是路上的时间, ...
- pcre 不支持 utf 的问题
问题: Error 500 preg_match(): Compilation failed: this version of PCRE is compiled without UTF suppor ...
- Bootstrap modal.js 源码分析
/* ======================================================================== * Bootstrap: modal.js v3 ...
- NodeJS学习笔记 进阶 (4)基于express+muter的文件上传(ok)
个人总结:这篇文章主要讲了multer插件的使用,类似于formidable,可以用来处理post表单中的文件上传,读完这篇文章需要10分钟. 摘选自网络 概览 图片上传是web开发中经常用到的功能, ...
- PHP 数组转字符串，字符串转数组
explode将字符串分割为数组: $str = explode( ',',$str); 第一个参数为字符串的分界符,例如1,2,3,4. 第二个是需要分割的数组 分割后就是 array( 1 , 2 ...
- JDK工具(一)–Java编译器javac
1.概述 javac.exe: Java编译器,将Java源代码转换成字节码. 2.用法 javac <选项> <源文件> (使用过程中发现,javac <源 ...
- openGl超级宝典学习笔记 (2) 7个主要的几何图元
点(GL_POINTS): 点总是正方形的像素,默认情况下,点的大小不受透视除法影响. 即无论与视点的距离怎样,它的大小都不改变.为了获得圆点.必须在抗锯齿模式下绘制点. 能够用glPointSize ...
- 网易2016研发project师笔试题
网易2016研发project师笔试题 2015/12/9 11:25(网上收集整理的,參考答案在后面,若有错误请大神指出) 1. 运行指令find / -name "test.c" ...
- Linux下EPoll通信模型简析
EPoll基于I/O的事件通知机制,由系统通知用户那些SOCKET触发了那些相关I/O事件.事件中包括相应的文件描写叙述符以及事件类型.这样应用程序能够针对事件以及事件的source做相应的处理(Ac ...
- 美团实习生电面之谈（成功拿到offer）
3月底进行了美团的一次实习生面试(Java研发project师).当时顺利的通过一面.以下是我的一面: 1.CPU由哪些部分组成 2.线程和进程的差别 3.Java类载入机制 4.怎样实现一个字符串的 ...