html5 canvas 点击放烟花

html5 canvas 点击放烟花

代码里调用 run() 可实现带线的烟花,

点击canvas生成一朵烟花

右击canvas清空一次画布

双击canvans生成一朵带线的随机烟花

代码里我将clear()方法隐藏掉了, 所以不会每一帧都清空画布

用HTML实现烟花效果：（用谷歌浏览器打开网页，点击鼠标即可出现一帧一帧的烟花效果）

	
		
		点击放烟花, 右击清空
		
			* {
				margin: 0;
				padding: 0;
				background-color: black;
			}

			canvas {
				border: 1px solid;
			}
		


		
		
			// 烟花
			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