JS实现烟花爆炸效果

本文实例为大家分享了JS实现烟花爆炸的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

* {

margin: 0;

padding: 0;

}

html, body {

width: 100%;

height: 100%;

background-color: black;

overflow: hidden;

}

</style>

</head>

<body>

<canvas id="canvas"></canvas>

<script>

var canvas = document.getElementById("canvas");

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var content2d = canvas.getContext("2d");

var balls = []; //存储对象

//小球的基本属性

function ball() {

this.x = null;

this.y = null;

this.angle = null;

this.vx=null;

this.vy=null;

this.r = null;

this.color = null;

this.init = function (x, y) {

//初始化属性值

this.x = x;

this.y = y;

//随机角度

this.angle = Math.random() * Math.PI * 2;

//随机小球的大小

this.r = this.randomNum(10,25);

this.vx=(this.randomNum(6,12)+Math.random()*0.5)*Math.cos(this.angle);

this.vy=(this.randomNum(6,12)+Math.random()*0.5)*Math.sin(this.angle);

this.color = this.randomColor();

};

//随机小球颜色

this.randomColor = function () {

return "#" + parseInt(Math.random() * 16777216).toString(16);

};

//随机大小

this.randomNum = function (min, max) {

return Math.random() * max + min;

};

//重绘时需移动

this.move=function(){

this.x+=this.vx;

this.y+=this.vy;

this.r-=0.3;

this.vx*=0.93;

this.vy*=0.93;

}

}

//创建小球

function createBall(x, y) {

var count = parseInt(Math.random() * 30 + 10);

for (var i = 0; i < count; i++) {

var b = new ball();

b.init(x, y);

balls.push(b);

}

}

//画小球

function Draw(){

for(var i=0;i<balls.length;i++){

var circle=balls[i];

circle.move();

content2d.beginPath();

content2d.fillStyle=circle.color;

content2d.arc(circle.x,circle.y,circle.r,0,Math.PI*2);

content2d.fill();

content2d.closePath();

}

}

//移除小球

function removeBall(){

for(var i=0;i<balls.length;i++){

var circle=balls[i];

if(circle.r<0.3){

balls.splice(i,1);

i--;

}

}

}

//计时器,即重绘

loop();

function loop(){

//清除整个canvas

content2d.clearRect(0,0,canvas.width,canvas.height);

Draw();

removeBall();

window.requestAnimationFrame(loop);

}

canvas.onmouseup = function (e) {

var x = e.pageX;

var y = e.pageY;

createBall(x, y);

}

</script>

</body>

</html>

更多JavaScript精彩特效分享给大家:

Javascript菜单特效大全

javascript仿QQ特效汇总

JavaScript时钟特效汇总

以上是 JS实现烟花爆炸效果 的全部内容, 来源链接: utcz.com/z/323313.html

回到顶部