<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
body {
background: #000;
color: #aaa;
font: 100%/20px helvetica, arial, sans-serif;
}
canvas {
display: block;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%
}
#control-panel {
background: rgba(0,0,0,.75);
border: 1px solid #333;
left: 20px;
padding: 10px 15px;
position: absolute;
top: 20px;
z-index: 2;
}
p {
font-size: 12px;
margin: 0 0 5px;
}
label {
font-size: 12px;
font-weight: bold;
}
button {
display: block;
margin: 10px 0 5px;
}
a {
border-bottom: 1px dotted #444;
color: #fff;
font-size: 12px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="control-panel">
<p>Click and drag to make more!</p>
<label>Trails: </label>
<input type="checkbox" id="trail" name="trail" checked />
<button id="clear">Clear</button>
<a href="https://codepen.io/jackrugile/pen/aCzHs">View Version 2</a>
</div>
<canvas id="c"></canvas>
<script>
window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
document.onselectstart = function() {
return false;
};
var c = document.getElementById('c');
var ctx = c.getContext('2d');
var dpr = window.devicePixelRatio;
var cw = window.innerWidth;
var ch = window.innerHeight;
c.width = cw * dpr;
c.height = ch * dpr;
ctx.scale(dpr, dpr);
var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}
ctx.lineCap = 'round';
var orbs = [];
var orbCount = 30;
var radius;
var trailCB = document.getElementById('trail');
var trail = trailCB.checked;
var clearer = document.getElementById('clear');
function createOrb(mx,my){
var dx = (cw/2) - mx;
var dy = (ch/2) - my;
var dist = Math.sqrt(dx * dx + dy * dy);
var angle = Math.atan2(dy, dx);
orbs.push({
x: mx,
y: my,
lastX: mx,
lastY: my,
hue: 0,
colorAngle: 0,
angle: angle + Math.PI/2,
//size: .5+dist/250,
size: rand(1,3)/2,
centerX: cw/2,
centerY: ch/2,
radius: dist,
speed: (rand(5,10)/1000)*(dist/750)+.015,
alpha: 1 - Math.abs(dist)/cw,
draw: function() {
ctx.strokeStyle = 'hsla('+this.colorAngle+',100%,50%,1)';
ctx.lineWidth = this.size;
ctx.beginPath();
ctx.moveTo(this.lastX, this.lastY);
ctx.lineTo(this.x, this.y);
ctx.stroke();
},
update: function(){
var mx = this.x;
var my = this.y;
this.lastX = this.x;
this.lastY = this.y;
var x1 = cw/2;
var y1 = ch/2;
var x2 = mx;
var y2 = my;
var rise = y1-y2;
var run = x1-x2;
var slope = -(rise/run);
var radian = Math.atan(slope);
var angleH = Math.floor(radian*(180/Math.PI));
if(x2 < x1 && y2 < y1){angleH += 180;}
if(x2 < x1 && y2 > y1){angleH += 180;}
if(x2 > x1 && y2 > y1){angleH += 360;}
if(y2 < y1 && slope =='-Infinity'){angleH = 90;}
if(y2 > y1 && slope =='Infinity'){angleH = 270;}
if(x2 < x1 && slope =='0'){angleH = 180;}
if(isNaN(angleH)){angleH = 0;}
this.colorAngle = angleH;
this.x = this.centerX + Math.sin(this.angle*-1) * this.radius;
this.y = this.centerY + Math.cos(this.angle*-1) * this.radius;
this.angle += this.speed;
}
});
}
function orbGo(e){
var mx = e.pageX - c.offsetLeft;
var my = e.pageY - c.offsetTop;
createOrb(mx,my);
}
function turnOnMove(){
c.addEventListener('mousemove', orbGo, false);
}
function turnOffMove(){
c.removeEventListener('mousemove', orbGo, false);
}
function toggleTrails(){
trail = trailCB.checked;
}
function clear(){
orbs = [];
}
c.addEventListener('mousedown', orbGo, false);
c.addEventListener('mousedown', turnOnMove, false);
c.addEventListener('mouseup', turnOffMove, false);
trailCB.addEventListener('change', toggleTrails, false);
clearer.addEventListener('click', clear, false);
var count = 100;
while(count--){
createOrb(cw/2, ch/2+(count*2));
}
var loop = function(){
window.requestAnimFrame(loop);
if(trail){
ctx.fillStyle = 'rgba(0,0,0,.1)';
ctx.fillRect(0,0,cw,ch);
} else {
ctx.clearRect(0,0,cw,ch);
}
var i = orbs.length;
while(i--){
var orb = orbs[i];
var updateCount = 3;
while(updateCount--){
orb.update();
orb.draw(ctx);
}
}
}
loop();
</script>
</body>
</html>
HTML——旋转线条（追光者）.zip （1个子文件） 
HTML——旋转线条（追光者）.html 5KB
追光者♂
- 粉丝: 2w+
- 资源: 527
最新资源
- qaxbrowser-1.1.32574.52.exe (奇安信浏览器windows安装包)
- C#编写modbus tcp客户端读取modbus tcp服务器数据
- 某房地产瑞六补环境部分代码
- 基于Matlab实现无刷直流电机仿真（模型+说明文档）.rar
- AllSort(直接插入排序，希尔排序，选择排序，堆排序，冒泡排序，快速排序，归并排序)
- 模拟qsort,改造冒泡排序使其能排序任意数据类型，即日常练习
- carsim+simulink联合仿真实现变道 包含路径规划算法+mpc轨迹跟踪算法 可选simulink版本和c++版本算法 可以适用于弯道道路，弯道车道保持，弯道变道 carsim内规划轨迹可视化
- 数组经典习题之顺序排序和二分查找和冒泡排序
- 永磁同步电机神经网络自抗扰控制，附带编程涉及到的公式文档，方便理解，模型顺利运行，效果好，位置电流双闭环采用二阶自抗扰控制，永磁同步电机三闭环控制，神经网络控制，自抗扰中状态扩张观测器与神经网络结合
- 基于 Oops Framework 提供的游戏项目开发模板，项目中提供了最新版本 Cocos Creator 3.x 插件与游戏资源初始化通用逻辑
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0