canvas实战之酷炫背景动画（五）

系列文章
canvas实战之酷炫背景动画（一）
canvas实战之酷炫背景动画（二）
canvas实战之酷炫背景动画（三）
canvas实战之酷炫背景动画（四）
canvas实战之酷炫背景动画（五）
canvas实战之酷炫背景动画（六）
canvas实战之酷炫背景动画（七）

接下来添加鼠标移动时间。当鼠标与圆点距离达到固定距离1时，圆点会被瞬间吸到距离鼠标的另一个固定距离2(可视为出现线条的最大距离)，然后继续向当前鼠标与圆点方向运动到鼠标的另一边。当鼠标快速移动使鼠标与圆点距离大于固定距离1时，圆点脱离。

<script type="text/javascript">
class FwhfPointLine{constructor(pointNum,pointR,pointColor,pointSpeed,lineMaxLength,lineColor,eMaxLength,eState){this.pointNum = pointNum;this.pointR = pointR;this.pointColor = pointColor;this.pointColorLength = pointColor.length;this.pointSpeed = pointSpeed;this.lineMaxLength = Math.pow(lineMaxLength,2);this.lineColor = lineColor;this.eMaxLength = eMaxLength;this.eCoefficient = lineMaxLength/eMaxLength;this.eState = eState;this.width = window.innerWidth;this.height = window.innerHeight;this.pointArr = [];this.timer = null;this.canvas = '';this.context = '';this.x = '';this.y = ''; this.flag = false;this.init();}init(){document.body.innerHTML += "<canvas id='fwhfCanvas'></canvas>";this.canvas = document.getElementById('fwhfCanvas');this.canvas.width = this.width;this.canvas.height = this.height;this.canvas.style.position = "fixed";this.canvas.style.top = 0;this.canvas.style.left = 0;this.canvas.style.pointerEvents = 'none';this.context = this.canvas.getContext('2d');for(var i = 0 ; i < this.pointNum ; i++){this.pointArr[i] = [this.rand(this.pointR[1],this.width-this.pointR[1]),this.rand(this.pointR[1],this.height-this.pointR[1]),this.rand(this.pointR[0],this.pointR[1]),this.rand(0,this.pointColorLength-1),this.rand(this.pointSpeed[0],this.pointSpeed[1]),this.rand(this.pointSpeed[0],this.pointSpeed[1]),this.eState];}window.onmousemove = (e)=>{var e = e || event;this.x = e.clientX;this.y = e.clientY;if(!this.flag && this.x > 3 && this.x < this.width-3 && this.y > 3 && this.y < this.height-3){this.flag = !this.flag;}if(this.flag && (this.x <= 3 || this.x >= this.width-3 || this.y <= 3 || this.y >= this.height-3)){this.flag = !this.flag;for(var i = 0 ; i < this.pointNum ; i++){this.pointArr[i][6] = false;}}}this.Repaint();}drawPoint(){for(var i = 0 ; i < this.pointNum ; i++){if(this.flag){var showELineeCoefficient = Math.pow(this.x-this.pointArr[i][0],2)+Math.pow(this.y-this.pointArr[i][1],2);var showELine = showELineeCoefficient/Math.pow(this.eMaxLength,2);if(showELine < 1){this.pointArr[i][6] = true;this.pointArr[i][0] = this.x-Math.sqrt(this.lineMaxLength)*(this.x-this.pointArr[i][0])/Math.sqrt(showELineeCoefficient);this.pointArr[i][1] = this.y-Math.sqrt(this.lineMaxLength)*(this.y-this.pointArr[i][1])/Math.sqrt(showELineeCoefficient);}else{this.pointArr[i][6] = false;}}this.context.beginPath();this.context.fillStyle = this.pointColor[this.pointArr[i][3]];this.context.arc(this.pointArr[i][0],this.pointArr[i][1],this.pointArr[i][2],0,2*Math.PI);this.context.fill();this.context.closePath();if(!this.pointArr[i][6]){if(this.pointArr[i][0] + this.pointArr[i][4] >= this.canvas.width){this.pointArr[i][0] = this.canvas.width;this.pointArr[i][4] *= -1;}else if(this.pointArr[i][0] + this.pointArr[i][4] <= 0){this.pointArr[i][0] = 0;this.pointArr[i][4] *= -1;}else{this.pointArr[i][0] += this.pointArr[i][4];}if(this.pointArr[i][1] + this.pointArr[i][5] >= this.canvas.height){this.pointArr[i][1] = this.canvas.height;this.pointArr[i][5] *= -1;}else if(this.pointArr[i][1] + this.pointArr[i][5] <= 0){this.pointArr[i][1] = 0;this.pointArr[i][5] *= -1;}else{this.pointArr[i][1] += this.pointArr[i][5];}}}}drawLine(){var drawLineNum = 0;for(var i = 0 ; i < this.pointNum ; i++){if(!this.pointArr[i][6]){for(var j = 0 ; j < i-1 ; j++){var showIndex = ((Math.pow(this.pointArr[i][0]-this.pointArr[j][0],2)+ Math.pow(this.pointArr[i][1]-this.pointArr[j][1],2))/this.lineMaxLength).toFixed(1);if(showIndex < 1){this.context.beginPath();this.context.strokeStyle = "rgba("+this.lineColor[0]+","+this.lineColor[1]+","+this.lineColor[2]+","+(1-showIndex)+")";this.context.moveTo(this.pointArr[i][0],this.pointArr[i][1]);this.context.lineTo(this.pointArr[j][0],this.pointArr[j][1]);this.context.stroke();this.context.closePath();}}}else{drawLineNum++;this.context.beginPath();this.context.strokeStyle = "rgba("+this.lineColor[0]+","+this.lineColor[1]+","+this.lineColor[2]+",0.2)";this.context.moveTo(this.x,this.y);this.context.lineTo(this.pointArr[i][0],this.pointArr[i][1]);this.context.stroke();if(drawLineNum >= 2){for(var k = 0 ; k < this.pointNum ; k++){if(this.pointArr[k][6] && Math.pow((this.pointArr[i][0]-this.pointArr[k][0]),2)+Math.pow((this.pointArr[i][1]-this.pointArr[k][1]),2)<600){this.context.moveTo(this.pointArr[i][0],this.pointArr[i][1]);this.context.lineTo(this.pointArr[k][0],this.pointArr[k][1]);this.context.stroke();}}}this.context.closePath();}}}Repaint(){this.timer = setInterval(()=>{this.context.clearRect(0,0,this.width,this.height);this.drawPoint();this.drawLine();},30)}rand(min,max){var c = max - min + 1;return Math.floor(Math.random() * c + min);}
}
/*
*pointeNum 随机的点的个数 number
*pointR 点的半径 array [minR,maxR] 推荐[0.5,1]
*pointColor 点的颜色 array [color1,color2,...]
*pointSpeed 点的速度 array [speedX,speedY]
*lineMaxLength 线条出现的最大长度 number
*lineColor 线条的颜色 array [0-255,0-255,0-255]
*eMaxLength 鼠标与圆之间的最大距离 number
*eState 当鼠标与圆点之间出现连线时不出现圆点间的连线 number 默认值false
*/
new FwhfPointLine(50,[0.5,1],['rgb(200,0,0)','rgb(0,200,0)','rgb(0,0,200)'],[-3,3],100,[222,116,159],150,false);
</script>

canvas实战之酷炫背景动画（五）相关推荐

canvas实战之酷炫背景动画（二）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（三）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（一）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（七）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（四）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
canvas实战之酷炫背景动画（六）
系列文章 canvas实战之酷炫背景动画(一) canvas实战之酷炫背景动画(二) canvas实战之酷炫背景动画(三) canvas实战之酷炫背景动画(四) canvas实战之酷炫背景动画(五) ...
便利贴--12{酷炫背景，小球随鼠标移动，可自由设置小球属性}
便利贴--12{酷炫背景,小球随鼠标移动,可自由设置小球属性} html 资源下载 0积分 html 之前做的拿出来分享下 <!DOCTYPE html> <html>< ...
一个精美的跳动小球—手把手教你用贝塞尔曲线实现一个酷炫跳动动画。
一个精美的跳动小球-手把手教你用贝塞尔曲线实现一个酷炫跳动动画. 2017-08-07 BraveJoy 终端研发部前言介绍手把手教你用贝塞尔曲线实现一个精美的跳动的小球. 正文效果展示: 说点 ...
直播App中Android酷炫礼物动画如何通过直播程序源码实现方案
直播App中Android酷炫礼物动画如何通过直播程序源码实现方案这个动画,如果输出成GIF的话,要3MB,尺寸是750*750.在上一篇文章中已经介绍过几种被否掉的方法,这里再稍作补充说明,如果使 ...

canvas实战之酷炫背景动画（五）

canvas实战之酷炫背景动画（五）相关推荐

最新文章

热门文章