【无标题】

最新推荐文章于 2024-10-09 22:27:58 发布

丞玉

最新推荐文章于 2024-10-09 22:27:58 发布

阅读量50

点赞数

文章标签：其他

原文链接：https://www.w3cschool.cn/article/86507874.html

版权

这篇博客介绍了一个名为`Particle`的类，用于创建和更新烟花效果。粒子在初始化时设置坐标，然后随着时间的推移，通过重力变量控制其在Y轴上的下落。`update`方法更新粒子位置，`draw`方法绘制粒子到画布上，利用`CanvasRenderingContext2D`进行渲染。博客还展示了如何通过调整时间跨度和重力来控制烟花的展示时长和下落速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Particle

初始创建的时候给个坐标，后续每次更新的时候控制y坐标下落，gravity变量就是下落的值。timeSpan用于控制烟花展示的时长：

import Vector from './Vector';
export default class Particle {
    pos: Vector = null;
    vel: {x: number; y: number} = null;
    dead: boolean = false;
    start: number = 0;
    ctx: CanvasRenderingContext2D = null;
    constructor(pos: {x: number; y: number}, vel: {x: number; y: number}, ctx: CanvasRenderingContext2D) {
        this.pos = new Vector(pos.x, pos.y);
        this.vel = vel;
        this.dead = false;
        this.start = 0;
        this.ctx = ctx;
    }
    update(time: number, gravity: number) {
        let timeSpan = time - this.start;

        if (timeSpan > 500) {
            this.dead = true;
        }

        if (!this.dead) {
            this.pos.add(this.vel);
            this.vel.y = this.vel.y + gravity;
        }
    }

    draw() {
        if (!this.dead) {
            this.drawDot(this.pos.x, this.pos.y, Math.random() > 0.5 ? 1 : 2);
        }
    }
    drawDot(x: number, y: number, size: number) {
        this.ctx.beginPath();
        this.ctx.arc(x, y, size, 0, Math.PI * 2);
        this.ctx.fill();
        this.ctx.closePath();
    }
}