canvas实现烟花的示例代码


Posted in HTML / CSS onJanuary 16, 2020

前言:马上过年了,我打算在后台里面偷偷地埋个新春祝福+放烟花的彩蛋。项目是基于react+typescript的,因此最后封装成了一个组件,设置好开启时间就可以显示了。

目录结构

目录结构大致如下

canvas实现烟花的示例代码

我们将烟花分为两个阶段,一个是未炸开持续上升时期,另一个是炸开后分散的时期。
其中Vector表示一个坐标,Particle表示一个烟花的亮点,Firewor表示烟花未炸开时持续上升的亮点。index.tsx就是组件了,绘制了canvas,并执行了动画。

Vector

这个坐标就很简单,后面涉及到位置的变更都可以使用它的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;
    }
}

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();
    }
}

Firework

生成随机的hsl颜色,hsl(' + rndNum(360) + ', 100%, 60%);Firework每次上升的距离是一个递减的过程,我们初始设置一个上升的距离,之后每次绘制的时候,这个距离减gravity,当距离小于零的时候,说明该出现烟花绽放的动画了。

import Vector from './Vector';
import Particle from './Particle';
let rnd = Math.random;
function rndNum(num: number) {
    return rnd() * num + 1;
}
export default class Firework {
    pos: Vector = null;
    vel: Vector = null;
    color: string = null;
    size: number = 0;
    dead: boolean = false;
    start: number = 0;
    ctx: CanvasRenderingContext2D = null;
    gravity: number = null;
    exParticles: Particle[] = [];
    exPLen: number = 100;
    rootShow: boolean = true;
    constructor(x: number, y: number, gravity: number, 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: number, gravity: number) {
        if (this.dead) {
            return;
        }

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

        if (this.rootShow) {
            this.pos.add(this.vel);
            this.vel.y = this.vel.y + gravity;
        } 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) {
            return;
        }

        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: number, y: number, size: number) {
        this.ctx.beginPath();

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

        this.ctx.closePath();
    }
}

FireworkComponent

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

import React from 'react';
import Firework from './Firework';
import {autobind} from 'core-decorators';
let rnd = Math.random;
function rndNum(num: number) {
    return rnd() * num + 1;
}
interface PropTypes {
    onClick?: () => void;
}
@autobind
class FireworkComponent extends React.Component<PropTypes> {
    canvas: HTMLCanvasElement = null;
    ctx: CanvasRenderingContext2D = null;
    snapTime: number = 0;
    fireworks: Firework[] = [];
    gravity: number = 0.1;
    componentDidMount() {
        this.canvas = document.querySelector('#fireworks');
        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 / 2, 260);
        text = '工作顺利,新春快乐!';
        this.ctx.font = 'bold 48px STCaiyun';
        this.ctx.fillStyle = 'orangered';
        textWidth = this.ctx.measureText(text);
        this.ctx.fillText(text, this.canvas.width / 2 - textWidth.width / 2, 340);
        this.ctx.fillStyle = 'gray';
        this.ctx.font = '18px Arial';
        text = '点击任意处关闭';
        textWidth = this.ctx.measureText(text);
        this.ctx.fillText(text, this.canvas.width - 20 - textWidth.width, 60);
        this.snapTime = time;

        this.ctx.fillStyle = 'blue';
        for (let i = 0, len = this.fireworks.length; i < len; i++) {
            let p = this.fireworks[i];
            if (p.dead) {
                p = this.fireworks[i] = new Firework(
                    rndNum(this.canvas.width),
                    this.canvas.height,
                    this.gravity,
                    this.ctx
                );
                p.start = time;
            }
            p.draw();
        }

        window.requestAnimationFrame(this.draw);
    }

    render() {
        return (
            <canvas
                id="fireworks"
                onClick={this.props.onClick}
                style={{position: 'fixed', zIndex: 99, background: 'rgba(0,0,0, 0.8)'}}
                width="400"
                height="400"></canvas>
        );
    }
}
export default FireworkComponent;

大致效果

canvas实现烟花的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 #HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 #HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 #HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 #HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 #HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 #HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 #HTML / CSS
You might like
目录,文件操作详谈―PHP
2006/11/25 PHP
PHP中的extract的作用分析
2008/04/09 PHP
php中autoload的用法总结
2013/11/08 PHP
php实现图片缩放功能类
2013/12/18 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
同事打架检讨书
2014/02/04 职场文书
森林防火工作方案
2014/02/14 职场文书
车间主任岗位职责
2014/03/16 职场文书
新闻报道策划方案
2014/06/11 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
Django显示可视化图表的实践
2021/05/10 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL