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

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

最后为圆点添加一些小动画。不过似乎有些偏离了原本的样子…(低调低调)

<script type="text/javascript">
class FwhfPointLine{constructor(pointNum,pointR,pointColor,pointSpeed,lineMaxLength,lineColor,eMaxLength,eState,eSpeed,animation){this.pointNum = pointNum || 99;this.pointR = pointR || [0.5,0.7];this.pointColor = pointColor || ['rgb(200,0,0)','rgb(0,200,0)','rgb(0,0,200)'];this.pointColorLength = this.pointColor.length;this.pointSpeed = pointSpeed || [-3,3];this.lineMaxLength = lineMaxLength || 100;this.lineMaxLength = Math.pow(this.lineMaxLength,2);this.lineColor = lineColor || [222,116,159];this.eMaxLength = eMaxLength || 150;this.eState = eState || false;this.eSpeed = eSpeed || 5;this.animation = animation || 3;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,2*this.eSpeed,1];}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(!this.pointArr[i][6] && 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 if(showELine > 1){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];}}else{var eSpeedCoefficient = Math.sqrt(Math.pow(this.x-this.pointArr[i][0],2)+Math.pow(this.y-this.pointArr[i][1],2));var eSpeed = this.pointArr[i][6]-this.eSpeed;switch(this.animation){case 0:this.pointArr[i][0] += eSpeed*(this.x-this.pointArr[i][0])/eSpeedCoefficient;this.pointArr[i][1] += eSpeed*(this.y-this.pointArr[i][1])/eSpeedCoefficient;case 1:this.pointArr[i][0] += eSpeed*(this.x-this.pointArr[i][0])/eSpeedCoefficient;this.pointArr[i][1] -= eSpeed*(this.y-this.pointArr[i][1])/eSpeedCoefficient;case 2:this.pointArr[i][0] -= eSpeed*(this.x-this.pointArr[i][0])/eSpeedCoefficient;this.pointArr[i][1] += eSpeed*(this.y-this.pointArr[i][1])/eSpeedCoefficient;case 3:this.pointArr[i][0] -= eSpeed*(this.x-this.pointArr[i][0])/eSpeedCoefficient;this.pointArr[i][1] -= eSpeed*(this.y-this.pointArr[i][1])/eSpeedCoefficient;}this.pointArr[i][6] -= this.pointArr[i][7];if(this.pointArr[i][6] == 0 || this.pointArr[i][6] == 2*this.eSpeed){this.pointArr[i][7] *= -1;}}}}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();},40)}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
*eSpeed 当圆点被拉回后向中心缓冲的汇聚速度
*animation number 0 1 2 3
*/
new FwhfPointLine(99,[0.5,0.7],['rgb(200,0,0)','rgb(0,200,0)','rgb(0,0,200)'],[-3,3],100,[222,116,159],150,false,3,3);
</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实战之酷炫背景动画（六）相关推荐

最新文章

热门文章