BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

花火用キャンバスサンプルコード

2022-01-14 02:18:49

前置き：もうすぐ大晦日、旧正月の祝福＋花火の卵をこっそり背景の中に埋める予定です。プロジェクトはreact+typescriptに基づいているので、最終的にコンポーネントにカプセル化され、オープニングの時間を表示することができます設定します。

ディレクトリ構成

ディレクトリ構成はおおよそ以下の通りです。

花火が爆発するまでの連続上昇期と、爆発した後の分散期に分けて考えています。
ここで、Vectorは座標、Particleは花火のハイライト、Fireworは花火が吹き飛ばされていないときに上昇し続けるハイライトを表します。index.tsxは、キャンバスを描画し、アニメーションを実行するコンポーネントです。

ベクター

この座標は非常にシンプルで、後で位置を変更する場合は、addメソッドを使ってオフセットすることができます。 

export default class Vector {
    constructor(public x: number, public y: number) {}
    add(vec2: {x: number; y: number}) {
        this.x = this.x + vec2.x;
        this.y = this.y + vec2.y;
    }
}

パーティクル

最初は座標で作成され、その後の各更新でy座標のドロップを制御するために、重力変数はドロップの値です。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();
    }
}

フォイヤーワーク

随生成机的hsl颜色，也就是什么样子。 hsl(' + rndNum(360) + ', 100%, 60%) 花火每次上升的距离是一个递减的过程，我们初始设置一个上升的距离，之后每次绘制的时候，这个距离减重力，当距离小于零的时候，说明出现烟花绽放的動 画 了。 

import Vektor aus './Vektor';
importiere Teilchen aus './Particle';
let rnd = Math.random;
function rndNum(num: Zahl) {
    return rnd() * num + 1;
}
export default class Feuerwerk {
    pos: Vector = null;
    vel: Vector = null;
    color: string = null;
    size: Zahl = 0;
    dead: boolescher Wert = false;
    start: Zahl = 0;
    ctx: CanvasRenderingContext2D = null;
    gravity: Zahl = null;
    exParticles: Particle[] = [];
    exPLen: Zahl = 100;
    rootShow: boolean = true;
    constructor(x: Zahl, y: Zahl, gravity: Zahl, ctx: CanvasRenderingContext2D) {
        this.pos = new Vector(x, y);
        this.vel = new Vector(0, -rndNum(10) - 3);
        this.color = 'hsl(' + rndNum(360) + ', 100%, 60%)';
        this.size = 4;
        this.dead = false;
        this.start = 0;
        this.ctx = ctx;
        this.gravity = gravity;
    }
    update(time: Zahl, gravity: Zahl) {
        if (this.dead) {
            zurück;
        }

        this.rootShow = this.vel.y < 0;

        if (this.rootShow) {
            this.pos.add(this.vel);
            this.vel.y = this.vel.y + Schwerkraft;
        } else {
            if (this.exParticles.length === 0) {
                for (let i = 0; i < this.exPLen; i++) {
                    let randomR = rndNum(5);
                    let randomX = -rndNum(Math.abs(randomR) * 2) + Math.abs(randomR);
                    let randomY =
                        Math.sqrt(Math.abs(Math.pow(randomR, 2) - Math.pow(randomX, 2))) *
                        (Math.random() > 0.5 ? 1 : -1);
                    this.exParticles.push(new Particle(this.pos, new Vector(randomX, randomY), this.ctx));
                    this.exParticles[this.exParticles.length - 1].start = time;
                }
            }
            let numOfDead = 0;
            for (let i = 0; i < this.exPLen; i++) {
                let p = this.exParticles[i];
                p.update(time, this.gravity);
                if (p.dead) {
                    numOfDead++;
                }
            }

            if (numOfDead === this.exPLen) {
                this.dead = true;
            }
        }
    }

    draw() {
        if (this.dead) {
            zurückkehren;
        }

        this.ctx.fillStyle = this.color;
        if (this.rootShow) {
            this.drawDot(this.pos.x, this.pos.y, this.size);
        } else {
            for (let i = 0; i < this.exPLen; i++) {
                let p = this.exParticles[i];
                p.draw();
            }
        }
    }
    drawDot(x: Zahl, y: Zahl, size: Zahl) {
        this.ctx.beginPath();

        this.ctx.arc(x, y, size, 0, Math.PI * 2);
        this.ctx.fill();

        this.ctx.closePath();
    }
}

電源コンポーネント

组件本身就很简单了，生成和绘制火车，我们在这里面可额外加一些文字 

import React aus 'react';
importieren Sie Firework von './Firework';
importiere {autobind} von 'core-decorators';
let rnd = Math.random;
function rndNum(num: Zahl) {
    return rnd() * num + 1;
}
interface PropTypes {
    onClick?: () => void;
}
@autobind
class FireworkComponent extends React.Component<PropTypes> {
    canvas: HTMLCanvasElement = null;
    ctx: CanvasRenderingContext2D = null;
    snapTime: Zahl = 0;
    fireworks: Firework[] = [];
    gravity: Zahl = 0.1;
    componentDidMount() {
        this.canvas = document.querySelector('#feuerwerk');
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.ctx = this.canvas.getContext('2d');
        this.init();
        this.draw();
    }

    init() {
        let numOfFireworks = 20;
        for (let i = 0; i < numOfFireworks; i++) {
            this.fireworks.push(new Firework(rndNum(this.canvas.width), this.canvas.height, this.gravity, this.ctx));
        }
    }

    update(time: number) {
        for (let i = 0, len = this.fireworks.length; i < len; i++) {
            let p = this.fireworks[i];
            p.update(time, this.gravity);
        }
    }
    draw(time?: number) {
        this.update(time);

        this.ctx.fillStyle = 'rgba(0,0,0,0.3)';

        this.ctx.fillStyle = 'rgba(0,0,0,0)';
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        this.ctx.font = 'bold 30px cursive';
        this.ctx.fillStyle = '#e91818';
        let text = 'XX项目组给您拜个早年！';
        let textWidth = this.ctx.measureText(text);
        this.ctx.fillText(text, this.canvas.width / 2 - textWidth.width / 2, 200);
        text = '在新年来临之际，祝您：';
        textWidth = this.ctx.measureText(text);
        this.ctx.fillText(text, this.canvas.width / 2 - textWidth.width

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します