【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功 ...
随机推荐
- codeforces 400 C Inna and Huge Candy Matrix【模拟】
题意:给出一个矩形的三种操作,顺时针旋转,逆时针旋转,对称,给出原始坐标,再给出操作数,问最后得到的坐标 画一下模拟一下操作就可以找到规律了 #include<iostream> #inc ...
- http://www.open-open.com/lib/tag/ReactiveCocoa
http://www.open-open.com/lib/tag/ReactiveCocoa
- NodeJS学习笔记 (11)网络UDP-dgram(ok)
模块概览 dgram模块是对UDP socket的一层封装,相对net模块简单很多,下面看例子. UPD客户端 vs UDP服务端 首先,启动UDP server,监听来自端口33333的请求. se ...
- 用xmanager6启动Linux上的图形界面程序
1.下载Xmanager6 并自行安装,这里不赘述了 2.打开Xmanager.启动Xstart 3.按提示输入:主机IP,协议,用户名,命令,完成后点击“保存”,接着点击“运行”,运行xmanage ...
- Unity 调用 Android Native 方法(一) 获得Android系统音量
学习雷锋,好榜样,接下来的这一系类教程里,将通过unity来实现Android端的一些常用功能, 不需要在 Asset/Plugins/Android 目录下引用jar包或者aar包,这是重点. us ...
- Spring Boot学习总结（2）——Spring Boot整合Jsp
怎么使用jsp上面起了疑问,查阅了多方资料,找到过其他人的博客的描述,也找到了spring在github上的给出的例子,看完后稍微改动后成功 整合jsp,于是决定将整合过程记载下来. 无论使用的是那种 ...
- Opencv 三次样条曲线(Cubic Spline)插值
本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/47707679 1.样条曲线简介 样条曲 ...
- CJOI 05新年好 (最短路+枚举)
CJOI 05新年好 (最短路+枚举) 重庆城里有n个车站,m条双向公路连接其中的某些车站.每两个车站最多用一条公路连接,从任何一个车站出发都可以经过一条或者多条公路到达其他车站,但不同的路径需要花费 ...
- “Vbox安装CentOS系统”之低级错误一例：版本号的选择
日 期:2014年7月18日 错误描写叙述:虚拟机系统版本号选择错误,导致无法引导进入光盘安装 错误重演: 因为混淆了centos和rehat的版本号概念.错把centos作为一种新的版 ...
- Cisco交换机解决网络蠕虫病毒入侵问题
Cisco交换机解决网络蠕虫病毒入侵问题 今年来网络蠕虫泛滥给ISP和企业都造成了巨大损失,截至目前已发现近百万种病毒及木马.受感染的网络基础设施遭到破坏,以Sql Slammer为 ...