html5 canvas 烟花

最新推荐文章于 2024-07-13 16:23:22 发布

会宇

最新推荐文章于 2024-07-13 16:23:22 发布

阅读量1.2k

点赞数 1

分类专栏： html js 文章标签： html html5 canvas 烟花 canvas烟花

本文链接：https://blog.csdn.net/qq_39237554/article/details/89412461

版权

html 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击放烟花, 右击清空</title>
<style>
*{margin:0;padding:0;background-color:black;}
    canvas{border:1px solid;}
</style>


<!-- 烟花类 和烟花碎屑类 -->
<script>
// 烟花
function Firework(sx, sy, ex, ey, hue){
	this.sx = sx; // 开始x轴
	this.sy = sy; // 开始y轴
	this.ex = ex; // 结束x轴
	this.ey = ey; // 结束y轴
	this.x = sx; // 实时x轴
	this.y = sy; // 实时y轴
	this.old = new Array(); // 之前的旧角度
	this.speed = random(50, 100);
	this.angle = Math.atan2(ey - sy, ex - sx); // 角度
	this.actualDistance = 0; // 实际路径
	this.distance = countDistance(sx, sy, ex, ey); // 计算总距离
	this.acceleration = 1.05; // 加速
	this.friction = 0.95 //摩擦力
	this.gravity = 1; //重力
	this.hue = hue; // 色调
	this.brightness = random(50, 80); //随机明度
	this.alpha = 1; //初始透明度
	this.decay = random(0.015, 0.03); //碎屑小时的时间
	this.color = "black";
	// 现将old存储两个xy, 防止画出的时候下标溢出
	this.old.push({x:this.x, y:this.y});
	this.old.push({x:this.x, y:this.y});
}
// 烟花路径更新
Firework.prototype.update = function(){
	this.old.push({x:this.x, y:this.y}); // 储存废旧路径
	var x = Math.cos(this.angle) * this.speed;
	var y = Math.sin(this.angle) * this.speed;
	this.actualDistance = countDistance(this.sx, this.sy, this.x + x, this.y + y);
	this.x += x;
	this.y += y;
	this.old.push({x:this.x, y:this.y});
	if(this.distance < this.actualDistance) // 行走路径大于实际路径
		return false; // 烟花到目标燃放点
	else
		return true; // 烟花未到目标燃放点
}
// 爆炸颗粒
function Particle(x, y, hue){
	this.x = x;
	this.y = y;
	this.old = new Array(); // 记录步数
	this.angle = random(0, 2 * Math.PI); // 任意角度
	this.speed = random(1, 10); //随机速度
	this.friction = 0.95 //摩擦力
	this.gravity = 1; //重力
	this.hue = random(hue - 20, hue + 20); //生成与烟花色彩相近的碎屑
	this.brightness = random(50, 80); //随机明度
	this.alpha = 1; //初始透明度
	this.decay = random(0.015, 0.03); //碎屑存在时间
	// 现将old存储两个xy, 防止画出的时候下标溢出
	this.old.push({x:this.x, y:this.y});
	this.old.push({x:this.x, y:this.y});
}
// 爆炸颗粒更新
Particle.prototype.update = function(){
	this.old.push({x:this.x, y:this.y});
	this.speed *= this.friction; // 添加重力
	this.x += Math.cos(this.angle) * this.speed; // 计算下一步x轴
	this.y += Math.sin(this.angle) * this.speed + this.gravity; // 计算下一步y轴 + 重力
	this.old.push({x:this.x, y:this.y});
	this.alpha -= this.decay; // 每走一步消除碎屑透明度
	if(this.alpha < this.decay){ // 碎屑透明度轻于碎屑存在时间
		return false; // 烟花要消失
	}else{
		return true; // 烟花在燃放
	}
}
// 爆炸颗粒工厂
function ParticleFactory(sx, sy, hue){
	var array = new Array();
	var size = random(50, 500); // 烟花数量
	var scope = random(50, 500); // 烟花范围
	for(var i = 0 ; i < size ; i++){
		array.push(new Particle(sx, sy, hue));
	}
	return array;
}
</script>

<!-- 工具类 -->
<script>
// 随机数
function random(min, max) {
	return Math.random() * (max - min) + min;
}
// 随机颜色
function randomRgba(min, max) {
	var r = random(0, 255);
	var g = random(0, 255);
	var b = random(0, 255);
	var opacity = random(0.1, 1);
	var color = "rgba(" + r + ", " + g + ", " + b + ", " + opacity + ")";
	return color;
}
// 计算角度
function countDistance(x, y, xx, yy) {
	var a = x - xx;
	var b = y - yy;
	return Math.sqrt(a * a + b * b);
}
// 清空画布
function clear(){
//	ctx.clearRect(0, 0, width, height);
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0, 0, 0, 0.9)';
    ctx.fillRect(0, 0, width, height);
    ctx.globalCompositeOperation = 'lighter';
}
// 画线
function draw(obj){
	ctx.beginPath();
	ctx.moveTo(obj.old[obj.old.length-2].x, obj.old[obj.old.length-2].y);
	ctx.lineTo(obj.x, obj.y);
	var color = 'hsla(' + obj.hue + ',100%,' + obj.brightness + '%,' + obj.alpha + ')';
	ctx.strokeStyle = color;
	ctx.stroke();
}
</script>
</head>

<body>

    <canvas style="background-color:black;" id="canvas"></canvas>
    
</body>
<script>
    var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var width = window.innerWidth - 10, height = window.innerHeight - 10;
	var widthBorder = width * 0.1;
	var heightBorder = height * 0.1;
	canvas.width = width;
	canvas.height = height;
	
	var fireworks = [];
	var particles = [];
	
	    // 组合
	function create(){
		var x = width / 2;
		var y = height;
		var xx = random(widthBorder, width - widthBorder);
		var yy = random(heightBorder, height - heightBorder);
		fireworks.push(new Firework(x, y, xx, yy, random(0, 360)));
	}
	
	setInterval(create, 500);
	
	setInterval(function(){
		var i = fireworks.length;
		clear();
		while(i--){
			draw(fireworks[i]);
			if(!fireworks[i].update()){
				draw(fireworks[i]);
				particles = particles.concat(ParticleFactory(fireworks[i].x, fireworks[i].y, fireworks[i].hue));
				fireworks.splice(i, 1);
			}
		}
		i = particles.length;
		while(i--){
			draw(particles[i]);
			if(!particles[i].update()){
				draw(particles[i]);
				particles.splice(i, 1);
			}
		}
	}, 50);
	
</script>
</html>