Canvas烟花特效

最新推荐文章于 2024-07-13 16:23:22 发布

会Java的小胖纸

最新推荐文章于 2024-07-13 16:23:22 发布

阅读量280

点赞数

分类专栏：前端文章标签： HTML5 Canvas Firework动画 Shatter效果 JavaScript

本文链接：https://blog.csdn.net/qq_36709271/article/details/119917812

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图：

代码如下 :

<html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths" style=""><head> <meta charset="UTF-8"><title>HTML5 Preview Panel</title><script src="/libs/prefixfree.min.js"></script> <script src="/libs/modernizr.js"></script><style>canvas {
    position: absolute;
    top: 0;
    left: 0;
}</style></head><body><canvas id="c" width="848" height="576"></canvas><script>var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),

    fireworks = [],
    tick = 0;


ctx.fillStyle = '#111';
ctx.fillRect(0, 0, w, h);

ctx.font = '60px Verdana';
var text = 'Happy Birthday!',
    text2='想要安安静静写代码的程序员们',
    len = ctx.measureText(text).width,
    len2 = ctx.measureText(text2).width;

function anim() {

    window.requestAnimationFrame(anim);

    ++tick;

    if (fireworks.length < 50 && Math.random() < .1)
        fireworks.push(new Firework);

    ctx.fillStyle = 'rgba( 0, 0, 0, .04 )';
    ctx.fillRect(0, 0, w, h);

    ctx.fillStyle = 'hsl(0,0%,light%)'.replace('light', 50 + 20 * Math.sin(tick / 10));
    ctx.fillText(text, w / 2 - len / 2, h / 2 - 10);
    ctx.fillText(text2, w / 2 - len2 / 2, h / 2 - 120);

    fireworks.map(function(firework) {
        firework.step();
    });
}

function Firework() {
    this.reset();
}
Firework.prototype.reset = function() {

    this.dx = Math.random() * 300 * (Math.random() < .5 ? 1 : -1);

    this.sx = Math.random() * w;
    this.ex = this.sx + this.dx;
    this.ey = Math.random() * h;

    this.px = this.sx;
    this.py = 0;

    this.time = (30 + 30 * Math.random()) | 0;
    this.tick = 0;

    this.size = (2 + 2 * Math.random()) | 0;
    this.shatters = (5 + 5 * Math.random()) | 0;
    this.radiant = Math.PI * 2 / this.shatters;

    this.shatterContainer = [];
    this.dead = false;
}
Firework.prototype.step = function() {

    if (!this.dead) {
        ++this.tick;
        var prop = this.tick / this.time,
            nx = this.sx + this.dx * (1 + Math.sin(-Math.PI / 2 + prop * Math.PI / 2)),
            ny = prop * this.ey;

        ctx.strokeStyle = 'hsl(hue,80%,50%)'.replace('hue', tick / 3 + nx / w * 100);
        ctx.lineWidth = this.size;
        ctx.beginPath();
        ctx.moveTo(this.px, h - this.py);
        ctx.lineTo(nx, h - ny);
        ctx.stroke();

        this.px = nx;
        this.py = ny;

        if (prop >= 1) {

            this.dead = true;

            for (var i = 0; i < this.shatters; ++i)
                this.shatterContainer.push(new Shatter(nx, ny, this.radiant * i));
        }

        if (this.x < 0 || this.x > w)
            this.reset();

    } else {

        for (var i = 0; i < this.shatterContainer.length; ++i) {

            var shatter = this.shatterContainer[i];

            shatter.step();

            if (shatter.x < 0 || shatter.y > w || shatter.y > h) {

                this.shatterContainer.splice(i, 1);
                --i;
            }
        }

        if (this.shatterContainer.length === 0)
            this.reset();
    }
}

function Shatter(x, y, rad) {

    this.x = x;
    this.y = h - y;
    this.vx = (Math.random() + 1) * Math.cos(rad);
    this.vy = (Math.random() + 1) * Math.sin(rad);
}
Shatter.prototype.step = function() {

    var nx = this.x + (this.vx *= .999),
        ny = this.y + (this.vy += .02);

    ctx.strokeStyle = 'hsl(hue,80%,50%)'.replace('hue', tick / 3 + nx / w * 100);
    ctx.lineWidth = .5 + Math.random();
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.lineTo(nx, ny);
    ctx.stroke();

    this.x = nx;
    this.y = ny;
}

anim();</script></body></html>

会Java的小胖纸

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas烟花特效

效果图：代码如下 :<html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow text
复制链接

扫一扫

专栏目录