【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功 ...
随机推荐
- 使用物化视图解决GoldenGate不能使用中文表名问题
源端: conn sh/sh create table "学生" ("学号" number primary key,"姓名" varchar ...
- Scala和范畴论 -- 对Monad的一点认识
Scala和范畴论 -- 对Monad的一点认识 背景 所有一切的开始都是因为这句话:一个单子(Monad)说白了不过就是自函子范畴上的一个幺半群而已,有什么难以理解的.第一次看到这句话是在这篇文章: ...
- php session目录无法写进数据的问题
打算开启php的session功能,并将session信息存到文件里. 修改php.ini,开启session功能: #将session信息存到文件中session.save_handler = fi ...
- vue-cli生成的模板各个文件详解（转）
vue-cli脚手架中webpack配置基础文件详解 一.前言 原文:https://segmentfault.com/a/1190000014804826 vue-cli是构建vue单页应用的脚手架 ...
- echarts 绑定事件重复执行问题。
网上所有,先调用.off 方法后再调用.on 绑定事件. 无效果,查看api未发现off方法,于是采用,先删除原先元素,后重新生成的方式. 场景描述. 用户查询时,每次结果都对应一张饼图.该张饼图绑定 ...
- 20180929 北京大学 人工智能实践：Tensorflow笔记02
https://www.bilibili.com/video/av22530538/?p=16 https://www.bilibili.com/video/av22530538/?p=14 (完)
- web——前后端通信原理
前端向后台传输数据: 传输方法:post get 区别: (1)get:用于从服务器获取数据,将参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看 ...
- HttpService解析
HttpServlet容器响应Web客户请求流程如下: 1)Web客户向Servlet容器发出Http请求: 2)Servlet容器解析Web客户的Http请求: 3)Servlet容器创建一个Htt ...
- 概率dp HDU 3853
H - LOOPS Time Limit:5000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit ci ...
- 弯道超车，换一个思路，避免addEventListener为同一个元素重复赋予事件
addEventListener可以给同一个元素赋予多次同一个事件. 执行一次,就多一次事件效果.这不是我想要的. window.onload = function(){ var box = docu ...