canvas粒子特效

Html

Css

html {
	width:100%;
	height:100%;
}
body {
	height:100%;
	width:100%;
}
* {
	margin:0;
	padding:0;
}

//小球类
 function Ball(x, y, vx, vy, color, size) {
     this.x = x;
     this.y = y;
     this.vx = vx;
     this.vy = vy;
     this.color = color;
     this.size = size;
 }

//绘制
 Ball.prototype.draw = function() {
     ctx.beginPath();
     ctx.fillStyle = this.color;
     ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
     ctx.fill();
 }
 Ball.prototype.update = function() {
     if ((this.x + this.size) >= width || (this.x - this.size) <= 0) {
         this.vx = -this.vx;
     }
     if ((this.y + this.size) >= height || (this.y - this.size) <= 0) {
         this.vy = -this.vy;
     }
     this.x += this.vx;
     this.y += this.vy

}

var list = [];
 for (let i = 0; i <= 200; i++) {
     let c = new Ball(
         random(1, width),
         random(1, height),
         random(-3, 3) * (1 / 5.0),
         random(-3, 3) * (1 / 5.0),
         randomColor(),
         random(2, 10)
     );

list.push(c);
 }

//循环绘制
 loop = () => {
     ctx.fillStyle = "rgb(0,0,0)";
     ctx.fillRect(0, 0, width, height);
     for (let i = 0; i < list.length; i++) {

for (let j = 0; j < list.length; j++) {
             let Lx = Math.abs(list[j].x - list[i].x);
             let Ly = Math.abs(list[j].y - list[i].y);

let LL = Math.sqrt(Math.pow(Lx, 2) + Math.pow(Ly, 2));

if (LL <= 80) {

ctx.beginPath();
                 ctx.strokeStyle = `rgba(255,255,255,${(80-LL)/80})`
                 ctx.moveTo(list[i].x, list[i].y);
                 ctx.lineTo(list[j].x, list[j].y);
                 ctx.stroke();
             }

}

list[i].draw();
         list[i].update()
     }
     requestAnimationFrame(loop);
 }
 loop()

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas粒子特效



代码描述：这是一个简单的粒子特效demo，实现逻辑比较简单

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

→_→

相关代码

canvas粒子特效

最新