canvas学习案例之简单烟花效果

最新推荐文章于 2023-02-17 18:08:35 发布
最新推荐文章于 2023-02-17 18:08:35 发布
阅读量774 收藏 1
点赞数
分类专栏： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangshang1320/article/details/89134488
版权

效果：

固定一个起始点，烟花最高点是随机获取的，  散开后的落点是在一个半径为R的圆的范围内的点。

index.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="firework" width="800" height="500"></canvas>

<script src="firework.js"></script>
</body>
</html>

 

firework.js

let cxt;
let start = {
    x: 400,
    y: 400
};
let end = {
    x: 200,
    y: 200,
};
let sparks = [];
let sparkEndLength = 0;
let sparkColor = [0, 100, 160, 220, 280];
let animateLength = 0;//统计requestAnimationFrame动画次数   在中间的时候需要清除一下


function rand(min, max) {
    //~~运算符是取整 按位取整
    return (Math.random() * (max - min)) + min;
}

function initCanvas() {
    cxt = document.getElementById('firework').getContext('2d');
    cxt.fillRect(0, 0, 800, 500);

    /*****
     * 过程
     * 一束烟花从地面发射 确定开始坐标和结束坐标
     * 烟花以一定的加速度向某个方向飞去
     * 飞行一定时间后到达结束坐标并爆炸
     * 爆炸产生一定数量的小火花
     * 小火花向四周散开，并逐渐变暗消失
     */

    startAnimate();


}

function getRandEnd() {

    end = {
        x: rand(200, 600),
        y: 200
    };
}

function startAnimate() {
    getRandEnd();
    initVariate();
    //todo 这里如果直接这样写的话（顺序写动画）会存在问题   不是异步执行的（js是单线程的），
    //todo 换个思路：一直轮询，几个操作同时执行，完全不知道那个先，那个后不就实现了动画同时执行（这里还包括爆炸分散开的动画）

    new Promise(function (resolve, reject) {
        beforeBoom(resolve);
    }).then(function () {
        boomGenerateSpark();
    }).catch(function (e) {
        console.log('error', e);
    });
}

function initVariate() {
    sparks = [];
    sparkEndLength = 0;
    sparkColor = [0, 100, 160, 220, 280];

    animateLength = 0;//统计requestAnimationFrame动画次数   在中间的时候需要清除一下
}

class PathForSmall {
    constructor(cxt) {
        this.width = 2;
        this.cxt = cxt;
        this.cxt.fillStyle = '#fff';
        this.percent = 1;
        this.index = 0;
        this.pathPosLength = 30;
        this.paths = [];

    }

    move(resolve) {
        this.initPath();

        this.animation(resolve);
    }

    animation(resolve) {

        this.drawPath();
        this.percent = (this.percent + 1) % this.pathPosLength;
        if (this.percent != 0) {
            let that = this;
            requestAnimationFrame(function () {
                that.animation(resolve);
            });
        } else {
            resolve();
        }

    }

    initPath() {
        for (let i = 0; i < this.pathPosLength; i++) {
            let x = (end.x - start.x) / this.pathPosLength * i + start.x;
            let y = start.y - (start.y - end.y) / this.pathPosLength * (i);
            this.paths.push({
                x: x,
                y: y,
                opacity: i / this.pathPosLength
            })
        }
    }

    //绘制线条动画
    drawPath() {
        cxt.fillStyle = '#000';
        cxt.fillRect(0, 0, 800, 500);
        cxt.beginPath();
        cxt.strokeStyle = '#fff';
        cxt.lineWidth = this.width;
        cxt.globalAlpha = this.paths[this.percent - 1].opacity;
        cxt.moveTo(this.paths[this.percent].x, this.paths[this.percent].y);
        //这里用这么多次循环是为了动画  percent 只是为了拿取数组   操作都是拿去数组中的东西
        for (let i = 0; i < 1 / this.pathPosLength; i = i + 0.001) {

            //todo 优化：这里用贝塞尔二次曲线的话 我们需要知道最后一个下落的终点坐标   这里测试一下 最后一个点坐标 这里的每次是小距离
            let x = quadraticBezierOne(this.paths[this.percent - 1].x, this.paths[this.percent].x, i);
            let y = quadraticBezierOne(this.paths[this.percent - 1].y, this.paths[this.percent].y, i);
            cxt.lineTo(x, y);
            this.index++;
        }

        cxt.stroke();
    }


}

function beforeBoom(resolve) {
    let path = new PathForSmall(cxt);
    path.move(resolve);
}

function quadraticBezierOne(p0, p1, t) {
    return (1 - t) * p0 + t * p1;
}

//贝塞尔曲线获取点坐标  二次贝赛尔曲线方程
function quadraticBezier(p0, p1, p2, t) {
    let k = 1 - t;
    return k * k * p0 + 2 * k * t * p1 + t * t * p2;
}

//烟花散开需要三次贝塞尔曲线方程
function quadraticBezierThree(p0, p1, p2, p3, t) {
    let k = 1 - t;
    return k * k * k * p0 + 3 * t * k * k * p1 + 3 * t * 2 * k * p2 + 3 * t * p3;
}

class Spark {
    constructor(x, y) {
        this.start = {
            x: x || end.x,
            y: y || end.y
        };
        this.end = {
            x: 0,
            y: 0
        };
        this.lineWidth = 3;
        this.pathPosLength = 30;//平分为多少个段 进行动画  这个参数 还需要优化跳转
        this.sparksPaths = [];
        this.percent = 0;
        this.color = sparkColor[parseInt(Math.random() * 5)];
        this.isEnd = false;
    }

    initSparksPath() {
        let start = this.start;
        let end = this.end;
        for (let i = 0; i < this.pathPosLength; i++) {
            let x = (end.x - start.x) / this.pathPosLength * i + start.x;
            let y = (start.y + (end.y - start.y) / this.pathPosLength * (i));
            this.sparksPaths.push({
                x: x,
                y: y,
                opacity: i / this.pathPosLength + (i * 5) / this.pathPosLength
            })
        }
    }

    clearSparksPath() {
        if (this.sparksPaths.length > 1) {
            this.sparksPaths = [];
        }
    }

    drawPath() {
        cxt.save();
        cxt.beginPath();
        cxt.strokeStyle = this.color;
        cxt.strokeStyle = 'hsla(' + this.color + ',100%,' + rand(50, 100) + '%,1)';
        cxt.lineWidth = this.lineWidth;
        cxt.globalAlpha = this.sparksPaths[this.percent - 1].opacity;
        cxt.moveTo(this.sparksPaths[this.percent].x, this.sparksPaths[this.percent].y);
        //这里用这么多次循环是为了动画  percent 只是为了拿取数组   操作都是拿去数组中的东西 试一下二次曲线
        for (let i = 0; i < 1 / this.pathPosLength; i = i + 0.001) {
            let x = quadraticBezierOne(this.sparksPaths[this.percent - 1].x, this.sparksPaths[this.percent].x, i);
            let y = quadraticBezierOne(this.sparksPaths[this.percent - 1].y, this.sparksPaths[this.percent].y, i);
            cxt.lineTo(x, y);

        }

        cxt.closePath();
        cxt.stroke();
        cxt.restore();
    }
}

function boomGenerateSpark() {
    initSparkAttr();

    // console.log('sparks', sparks);
    sparkAnimation();
}

function initSparkAttr() {
    //
    let length = 50;
    for (let i = 0; i < length; i++) {

        let spark = new Spark();
        // let degree = 360 / length * i;//角度数
        //1.这个是获取圆上的点为end点
        // spark.end = getEndPointForCircle(spark.start,degree);
        //2.随机获取点为end点  在圆内
        spark.end = getRandomEndPoint(spark.start, i % 2);
        // console.log('spark',spark.end);
        // debugger
        sparks.push(spark);
    }
}

function getIsSamePoint(point) {
    let isSame = false;
    for (let i = 0; i < sparks.length; i++) {
        let spark = sparks[i];
        if ((spark.x == point.x) && (spark.y == point.y)) {
            isSame = true;
            break;
        }

    }

    return isSame;
}

function getEndPointForCircle(center, degree) {
    let radius = 150;

    let x = center.x + Math.cos(Math.PI * 2 / 360 * degree) * radius;
    let y = center.y + Math.sin(Math.PI * 2 / 360 * degree) * radius;

    return {
        x: x,
        y: y
    }

}

function getRandomEndPoint(center, type) {
    //保证随机性
    let radius = 150;
    //type true  false
    let x = center.x + (type ? Math.random() * radius : -Math.random() * radius);
    let y = center.y + (type ? -Math.random() * radius : Math.random() * radius);
    switch (parseInt(Math.random() * 3)) {
        case 0:
            x = center.x + (type ? -Math.random() * radius : Math.random() * radius);
            y = center.y + (type ? -Math.random() * radius : Math.random() * radius);
            break;
        case 1:
            x = center.x + (type ? -Math.random() * radius : Math.random() * radius);
            y = center.y + (type ? -Math.random() * radius : -Math.random() * radius);
            break;
        case 2:
            x = center.x + (type ? -Math.random() * radius : -Math.random() * radius);
            y = center.y + (type ? Math.random() * radius : -Math.random() * radius);
            break;
    }
    if (getIsSamePoint({
        x: x,
        y: y
    })) {
        getRandomEndPoint(center, type);
    } else {
        return {
            x: x,
            y: y
        }
    }

}

function sparkAnimation() {

    for (let i = 0; i < sparks.length; i++) {
        let spark = sparks[i];
        spark.percent = (spark.percent + 1) % 18;
        if (spark.percent != 0) {
            if (spark.sparksPaths.length == 0) {
                spark.initSparksPath();
            }
            spark.drawPath();
        }
        // console.log('spark',spark.percent);
        if (spark.percent <= 0) {
            sparks[i].isEnd = true;
        }

    }

    for (let i = 0; i < sparks.length; i++) {
        if (sparks[i].isEnd) {
            sparkEndLength++;
        }
    }

    if (sparkEndLength > sparks.length) {
        clearCanvas();
    } else {
        requestAnimFrame(function () {
            animateLength++;
            //这里给个变量进行中途清除  然动画的视觉效果看起来是向外扩散的  不清除的话会看见一整条线  清除了就只有单独的某几段啦
            if (animateLength % 10) {
                cxt.fillRect(0, 0, 800, 500);
            }
            sparkAnimation();
        });
    }

}

function clearCanvas() {

    for (let i = 0; i < sparks.length; i++) {
        let spark = sparks[i];
        spark.clearSparksPath();
    }
    sparks = [];
    console.log('clear');

    startAnimate();
}

initCanvas();

 

 

PS:这里还可以使用贝塞尔二次曲线优化动画，让动画看起来更自然的下落

wangshang1320
关注
专栏目录
canvas实现动态烟花效果
01-07
动态烟花，带尾迹，带爆炸文字，可自动配置颜色，文字，字体
用Canvas放一个烟花（发射、痕迹、爆炸、碎片、二次爆炸）
最新发布
cnzzs的博客
07-13 655
浪漫好看的烟花相信没有人不喜欢，文本我们就来做一个属于自己的烟花，动动鼠标就能给自己放一个。最终效果抢先看：烟花效果基本框架首先基本的动画循环必不可少：登录后复制 // 动画循环 const draw = () => { // 使用半透明填充画布，形成拖尾效果 ctx.fillStyle = 'rg...
用canvas实现烟花效果
qq_33721778的博客
12-31 1866
今天已经是2021年的最后一天了，马上就要是新的一年了，愿2022我们可以摘掉口罩。 跨年怎么能没有烟花呢，下面请欣赏canvas带来的烟花秀： canvas实现烟花效果 在线试一试 原文地址：https://www.cnblogs.com/visualiz/p/fireworks.html ...
canvas系列三之《烟花》效果实现
weixin_33725272的博客
09-23 674
canvas系列三之烟花效果实现 写在最前:   唉，时间过得真是快啊，距离上次写demo已经是半个月前了，原来想得是每周写一篇的，但是前段时间工作微忙，所以就没有demo产出（嘿嘿，偷偷的给自己找了个借口，还不知道以后能不能坚持产出呢......）。这次写的还是canvas的东西，利用canvas写了一个燃放烟花的demo。感觉差不多再写一两个demo我就会对这个东西做一下最后的总结吧，毕竟老写...
canvas简单的烟花效果
wyystyle的博客
04-21 192
ball 你的浏览器居然不支持Canvas？！赶快换一个吧！！
Canvas烟火效果
11-09
在这个案例中，“Canvas烟火效果”是一个利用HTML5的Canvas元素和JavaScript实现的视觉特效。 1. **Canvas基本概念** - Canvas是一个HTML标签，用于在网页上动态渲染2D图形。通过JavaScript操作Canvas的上下文（`...
html5属性canvas实现烟花播放效果.zip
07-11
- **动画效果**：jQuery的`.animate()`方法可以用于创建平滑的动画效果，但在这个案例中，大部分动画逻辑在Canvas上完成。 4. **性能优化** - **requestAnimationFrame**：使用`requestAnimationFrame()`替代传统...
HTML5 Canvas酷炫烟花庆祝动画特效
06-11
在这个案例中，可能使用`arc`方法绘制圆形烟花，或者通过多边形路径来模拟星形。每个烟花爆炸后，还可以散射出小颗粒，形成更逼真的效果。 5. **透明度与混合模式**：烟花在空中会逐渐消失，这可以通过调整Alpha...
新年快乐网页源码（含礼花烟花特效+福字旋转效果）纯canvas+css+js+html5
01-22
在这个案例中，Canvas被用来绘制礼花绽放和福字旋转的动画效果。 3. **CSS**：层叠样式表（CSS）用于控制网页的布局和样式。在这个项目中，CSS可能被用来设置页面的整体结构，元素的位置，以及背景颜色等，确保网页...
html5属性canvas实现性能堪比native体验效果的烟花播放效果.zip
09-25
HTML5的`<canvas>`元素是网页动态图形和交互式动画的重要工具，它允许开发者在浏览器上绘制2D图形，提供了媲美...这是一个很好的学习和实践HTML5、JavaScript和CSS3交互式效果的案例，对于提升前端开发技能大有裨益。
canvas 实现3D烟花特效.zip
09-17
canvas实现烟花绽放动画特效，美观好看炫酷.
用canvas属性实现3D烟花效果
04-26
在前端开发中，用canvas属性实现3D烟花效果,自动绽放，旋转
canvas烟花特效锦集
12-30
canvas可以实现不同动画效果，本文主要记录几种不同节日烟花效果实现。   实现一 html css body { background: #000; margin: 0; } canvas { cursor: crosshair; display: block; } js // when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval // n
canvas画出的烟花效果，根据鼠标的移动改变
08-24
canvas画出的烟花效果，根据鼠标的移动改变
HTML5 Canvas彩色烟花动画特效
06-12
HTML5 Canvas彩色烟花动画特效是一款五彩漂亮的HTML5网页放烟花特效。
canvas 烟花特效
齐枫的博客
02-02 1944
特效代码，本特效来自脚本之家，我将其去除了jQuery，还有一些其他的更改 Canvas 实现放烟花特效 "utf-8"> "X-UA-Compatible" content="IE=edge"> "text/css"> body { background: #ccc; } #banner-fire { position:
html5 烟花效果,canvas实现的烟花效果
weixin_42514616的博客
06-05 221
JavaScript语言：JaveScriptBabelCoffeeScript确定var w = c.width = window.innerWidth,h = c.height = window.innerHeight,ctx = c.getContext('2d'),cx = w / 2 | 0,cy = h / 2 | 0,opts = {baseSize: 8,addedSize: 8,...
canvas烟花效果-学习自用
weixin_58031521的博客
02-17 659
canvas烟花效果动画学习自用
canvas实现贼好看的烟花效果
weixin_52163352的博客
03-21 742
效果图： 废话不说，上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值