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

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

接着上一节，实现原点绘制及运动后实现线条的绘制，观察博客背景效果可以很明显的发现当两点距离小于某个定值时才会绘制，而且有透明度变化。
按照正常的思路，应当是在绘制点的循环中顺便判断两点间的距离是否小于某一个值。
ok,下面时代码实现。

ok,接下来就是实现给点添加颜色。并让点动起来。
需求数据格式

[[x1,y1,r1,colorIndex1,speedX1,speedY1],[x2.y2,r2,colorIndex2,speedX2,speedY2],....[xn,yn,rn,colorIndexn,speedXn,speedYn]
]

<script type="text/javascript">
class FwhfPointLine{constructor(pointNum,pointR,pointColor,pointSpeed,lineMaxLength,lineColor){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.width = window.innerWidth;this.height = window.innerHeight;this.pointArr = [];this.timer = null;this.canvas = '';this.context = '';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.Repaint();}draw(){for(var i = 0 ; i < this.pointNum ; i++){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][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];}for(var j = 0 ; j < this.pointNum ; 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]+","+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();}}}}Repaint(){this.timer = setInterval(()=>{this.context.clearRect(0,0,this.width,this.height);this.draw();},50)}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]
*/
new FwhfPointLine(50,[0.5,1],['rgb(200,0,0)','rgb(0,200,0)','rgb(0,0,200)'],[-3,3],100,[222,116,159]);
</script>

执行上述代码可以发现两点之间会出现两条线段，这是因为在 for循环嵌套中相当于绘制了两次。
而且直线连接处不在原点，这是因为在绘制第一条线段后，绘制第二条线段时后面的点发生了位移。大家思考一下如何解决这样的问题。

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实战之酷炫背景动画(五) ...
一个精美的跳动小球—手把手教你用贝塞尔曲线实现一个酷炫跳动动画。
一个精美的跳动小球-手把手教你用贝塞尔曲线实现一个酷炫跳动动画. 2017-08-07 BraveJoy 终端研发部前言介绍手把手教你用贝塞尔曲线实现一个精美的跳动的小球. 正文效果展示: 说点 ...
便利贴--12{酷炫背景，小球随鼠标移动，可自由设置小球属性}
便利贴--12{酷炫背景,小球随鼠标移动,可自由设置小球属性} html 资源下载 0积分 html 之前做的拿出来分享下 <!DOCTYPE html> <html>< ...
直播系统源码App中Android酷炫礼物动画直播平台源码搭建教程（上篇）
直播系统源码App中Android酷炫礼物动画直播平台源码搭建教程(上篇) 在当下移动直播火爆的年代,如果你曾经使用过移动端直播应用,相信会被里面那令人惊叹的礼物动画效果迷住,比如像下面这样的效果. ...

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

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

最新文章

热门文章