徐州设计网站,求职招聘网站建设投标书,农业网站建设源代码 ASP,深圳住建招标网官网闲来无事#xff0c;想着随便捣鼓一点东西玩玩 说说思路#xff1a;
一 需要一个粒子类
模拟每一个烟花粒子#xff0c;粒子有横坐标#xff0c;纵坐标#xff0c;半径#xff0c;速度#xff0c;颜色等属性#xff0c;以及绘制的方法。 颜色这里我加了个初始化的方法…闲来无事想着随便捣鼓一点东西玩玩 说说思路
一 需要一个粒子类
模拟每一个烟花粒子粒子有横坐标纵坐标半径速度颜色等属性以及绘制的方法。 颜色这里我加了个初始化的方法加了透明度的处理。代码如下 // 粒子类
import Explode from ./explode.js;class Particle {constructor(ctx, x, y, radius 5) {this.ctx ctx;this.radius radius;this.x x;this.y y;this.rgb null;this.angle 0;}// 初始化颜色initColor({ r, g, b }) {this.rgb { r, g, b };this.color rgba( r , g , b , 1 );}setColorAlpha(alpha) {this.color rgba( this.rgb.r , this.rgb.g , this.rgb.b , 1 );}paint() {this.ctx.beginPath();this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);this.ctx.fillStyle this.color;this.ctx.fill();this.ctx.closePath();this.ctx.save();}del() {delete this;}
}export default Particle;
2 需要一个发射的类
其实一次发射就是一个粒子从底部到天空的过程这里我把发射类继承了粒子类。代码如下 import Particle from ./particle.js;
import { getRandomColorRGB } from ./utils.js;
import Explode from ./explode.js;// 随机生成一个发射角度 从-30度到30度
const getRandomAngle () {return Math.random() * (Math.PI / 3) - Math.PI / 6;
};// 生成一个随机speed
const getRandomSpeed () {return Math.random() * 10 15;
};export default class OneShot extends Particle {constructor(ctx, x, y) {super(ctx, x, y);this.speed getRandomSpeed();this.initColor(getRandomColorRGB());this.paint();this.angle getRandomAngle();this.explode null;this.firstBoom true;}launch() {if (this.speed 0) {// 如果速度小于等于0就判断为到了爆炸阶段进行爆炸的逻辑// 第一次进入爆炸逻辑需生成一个爆炸实例if (this.explode) {this.explode.boom();} else {this.explode new Explode(this.ctx, this.x, this.y, this.rgb);}// this.del();return;} else {// 发射阶段发射角度是随机生成的竖直方向往两边各偏移30度的范围内this.x this.speed * Math.sin(this.angle);this.y - this.speed * Math.cos(this.angle);this.speed - 0.4;this.paint();}}
}
3 需要一个爆炸类模拟一次烟花发射到顶点时到爆炸效果。
每次到爆炸阶段都可以往数组中添加num个粒子起点一致往四周散开。还需要考虑到真实情况中的引力加速度。代码如下 // 随机生成20-30个粒子给不同的初始速度
import Particle from ./particle.js;// 随机生成一个发射角度 从0度到360度
const getRandomAngle () {return Math.random() * (Math.PI * 2);
};// 生成一个随机半径
const getRandomRadius () {return Math.random() * 3;
};// 生成一个随机speed
const getRandomSpeed () {return Math.random() 1;
};export default class Explode {constructor(ctx, x, y, colorRGB, num 30) {this.ctx ctx;this.x x;this.y y;this.list [];this.colorRGB colorRGB;// 爆炸数量this.num num;this.init();}init() {for (let i 0; i this.num; i) {let p new Particle(this.ctx, this.x, this.y, getRandomRadius());p.angle getRandomAngle();p.initColor(this.colorRGB);p.speed getRandomSpeed();this.list.push(p);}}boom() {// 爆炸阶段粒子移动逻辑由爆炸中心往四周散开角度随机从0-2*PIif (this.list.length 0) return;for (let i 0; i this.list.length; i) {const cur this.list[i];cur.x cur.speed * Math.sin(cur.angle);cur.y cur.y 0.2 - cur.speed * Math.cos(cur.angle);cur.paint();cur.speed - 0.01;if (cur.speed 0) {this.list.splice(i, 1);}}}
}最后再贴出index,html的代码
!--* Author: error: error: git config user.name please set dead value or install git error: git config user.email please set dead value or install git please set dead value or install git* Date: 2024-02-01 15:13:28* LastEditors: error: error: git config user.name please set dead value or install git error: git config user.email please set dead value or install git please set dead value or install git* LastEditTime: 2024-05-28 21:32:51* FilePath: /practice/index.html* Description: 这是默认设置,请设置customMade, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{padding: 0;margin: 0;box-sizing: border-box;}body {width: 100vw;height: 100vh;background-color: black;}.firework {width: 2px;height: 2px;background-color: red;position: absolute;}#myCanvas {width: 100%;height: 100%;}.bot {width: 100px;height: 40px;background: lightcoral;position: absolute;bottom: 0;left: 50%;margin-left: -50px;}/style
/headbodycanvas idmyCanvas width100px/canvasdiv classbot/div
/body
script src./main.js typemodule/script/html当然主方法一定要贴出来 import oneShot from ./oneShot.js;// 获取 canvas 元素
const canvas document.getElementById(myCanvas);
canvas.width canvas.offsetWidth;
canvas.height canvas.offsetHeight;
const ctx canvas.getContext(2d);
window.W canvas.width;
window.H canvas.height;const startX canvas.width / 2;
const startY canvas.height - 40 - 5;const pList [];
// 生成烟花粒子
for (let i 0; i 20; i) {let p new oneShot(ctx, startX, startY);pList.push(p);
}// 主进程方法
let timer;function main() {// ctx.clearRect(0, 0, W, H);pList.forEach((p) p.launch());// 这里每次都绘制一个蒙层来模拟拖尾的效果ctx.beginPath();ctx.fillStyle rgba(0,0,0,0.1);ctx.fillRect(0, 0, W, H);ctx.closePath();ctx.save();timer requestAnimationFrame(main);
}requestAnimationFrame(main);
ok废话不多说看看效果 烟花-canvas 老表学废了没
