首页 > 其他分享 >createjs、canvas烟花

createjs、canvas烟花

时间:2025-01-03 10:09:44浏览次数:1  
标签:canvas sky ctx 烟花 createjs ref stage

 

<!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>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }

        canvas {
            display: block;
            margin: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-user-select: none;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
    <script>
        (function () {
            var Fireworks, GRAVITY, K, SPEED, ToRadian, canvas, context, ctx, fireBoss, repeat, stage;

            canvas = document.getElementById("canvas");

            context = canvas.getContext("2d");

            canvas.width = window.innerWidth;

            canvas.height = window.innerHeight;

            stage = new createjs.Stage(canvas);

            stage.autoClear = false;

            ctx = canvas.getContext("2d");

            ctx.fillStyle = "rgba(0, 0, 0, 0)";

            ctx.fillRect(0, 0, canvas.width, canvas.height);

            createjs.Ticker.setFPS(50);

            // createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED
            createjs.Touch.enable(stage);

            stage.update();

            // 重力
            GRAVITY = 0.6;

            // 抵抗
            K = 0.9;

            // 速度
            SPEED = 6;

            // 角度弧度(degree)(radian)変換
            ToRadian = function (degree) {
                return degree * Math.PI / 180.0;
            };

            // 制作烟火
            Fireworks = class Fireworks {
                constructor(sx = 100, sy = 100, particles = 70) {
                    var circle, i, j, rad, ref, speed;
                    this.sx = sx;
                    this.sy = sy;
                    this.particles = particles;
                    this.sky = new createjs.Container();
                    this.r = 0;
                    this.h = Math.random() * 360 | 0;
                    this.s = 100;
                    this.l = 50;
                    this.size = 3;
                    for (i = j = 0, ref = this.particles; (0 <= ref ? j < ref : j > ref); i = 0 <= ref ? ++j : --j) {
                        speed = Math.random() * 12 + 2;
                        circle = new createjs.Shape();
                        circle.graphics.f(`hsla(${this.h}, ${this.s}%, ${this.l}%, 1)`).dc(0, 0, this.size);
                        circle.snapToPixel = true;
                        circle.compositeOperation = "lighter";
                        rad = ToRadian(Math.random() * 360 | 0);
                        circle.set({
                            x: this.sx,
                            y: this.sy,
                            vx: Math.cos(rad) * speed,
                            vy: Math.sin(rad) * speed,
                            rad: rad
                        });
                        this.sky.addChild(circle);
                    }
                    stage.addChild(this.sky);
                }

                explode () {
                    var circle, j, p, ref;
                    if (this.sky) {
                        ++this.h;
                        for (p = j = 0, ref = this.sky.getNumChildren(); (0 <= ref ? j < ref : j > ref); p = 0 <= ref ? ++j : --j) {
                            circle = this.sky.getChildAt(p);
                            // 加速度
                            circle.vx = circle.vx * K;
                            circle.vy = circle.vy * K;
                            // 位置计算
                            circle.x += circle.vx;
                            circle.y += circle.vy + GRAVITY;
                            // 颜色
                            this.l = Math.random() * 100;
                            // 粒子大小
                            this.size = this.size - 0.001;
                            if (this.size > 0) {
                                circle.graphics.c().f(`hsla(${this.h}, 100%, ${this.l}%, 1)`).dc(0, 0, this.size);
                            }
                        }
                        if (this.sky.alpha > 0.1) {
                            this.sky.alpha -= K / 50;
                        } else {
                            stage.removeChild(this.sky);
                            this.sky = null;
                        }
                    } else {

                    }
                }

            };

            fireBoss = [];

            setInterval(function () {
                ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            }, 40);

            setInterval(function () {
                var x, y;
                x = Math.random() * canvas.width | 0;
                y = Math.random() * canvas.height | 0;
                fireBoss.push(new Fireworks(x, y));
                return fireBoss.push(new Fireworks(x, y));
            }, 1300);

            repeat = function () {
                var fireworks, j, ref;
                for (fireworks = j = 0, ref = fireBoss.length; (0 <= ref ? j < ref : j > ref); fireworks = 0 <= ref ? ++j : --j) {
                    if (fireBoss[fireworks].sky) {
                        fireBoss[fireworks].explode();
                    }
                }
                stage.update();
            };

            createjs.Ticker.on("tick", repeat);

            stage.addEventListener("stagemousedown", function () {
                fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));
                return fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));
            });

        }).call(this);

        //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBLFNBQUEsRUFBQSxPQUFBLEVBQUEsQ0FBQSxFQUFBLEtBQUEsRUFBQSxRQUFBLEVBQUEsTUFBQSxFQUFBLE9BQUEsRUFBQSxHQUFBLEVBQUEsUUFBQSxFQUFBLE1BQUEsRUFBQTs7RUFBQSxNQUFBLEdBQVMsUUFBUSxDQUFDLGNBQVQsQ0FBd0IsUUFBeEI7O0VBQ1QsT0FBQSxHQUFVLE1BQU0sQ0FBQyxVQUFQLENBQWtCLElBQWxCOztFQUNWLE1BQU0sQ0FBQyxLQUFQLEdBQWdCLE1BQU0sQ0FBQzs7RUFDdkIsTUFBTSxDQUFDLE1BQVAsR0FBZ0IsTUFBTSxDQUFDOztFQUN2QixLQUFBLEdBQVEsSUFBSSxRQUFRLENBQUMsS0FBYixDQUFtQixNQUFuQjs7RUFDUixLQUFLLENBQUMsU0FBTixHQUFrQjs7RUFDbEIsR0FBQSxHQUFNLE1BQU0sQ0FBQyxVQUFQLENBQWtCLElBQWxCOztFQUNOLEdBQUcsQ0FBQyxTQUFKLEdBQWdCOztFQUNoQixHQUFHLENBQUMsUUFBSixDQUFhLENBQWIsRUFBZSxDQUFmLEVBQWlCLE1BQU0sQ0FBQyxLQUF4QixFQUE4QixNQUFNLENBQUMsTUFBckM7O0VBQ0EsUUFBUSxDQUFDLE1BQU0sQ0FBQyxNQUFoQixDQUF1QixFQUF2QixFQVRBOzs7RUFXQSxRQUFRLENBQUMsS0FBSyxDQUFDLE1BQWYsQ0FBc0IsS0FBdEI7O0VBQ0EsS0FBSyxDQUFDLE1BQU4sQ0FBQSxFQVpBOzs7RUFlQSxPQUFBLEdBQVUsRUFmVjs7O0VBa0JBLENBQUEsR0FBSSxJQWxCSjs7O0VBcUJBLEtBQUEsR0FBUSxHQXJCUjs7O0VBd0JBLFFBQUEsR0FBVyxRQUFBLENBQUMsTUFBRCxDQUFBO1dBQ1QsTUFBQSxHQUFTLElBQUksQ0FBQyxFQUFkLEdBQW1CO0VBRFYsRUF4Qlg7OztFQTRCTSxZQUFOLE1BQUEsVUFBQTtJ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LElBQUcsUUFBUSxDQUFDLFNBQUQsQ0FBVyxDQUFDLEdBQXZCO1FBQ0UsUUFBUSxDQUFDLFNBQUQsQ0FBVyxDQUFDLE9BQXBCLENBQUEsRUFERjs7SUFERjtJQUlBLEtBQUssQ0FBQyxNQUFOLENBQUE7RUFMTzs7RUFTVCxRQUFRLENBQUMsTUFBTSxDQUFDLEVBQWhCLENBQW1CLE1BQW5CLEVBQTJCLE1BQTNCOztFQUVBLEtBQUssQ0FBQyxnQkFBTixDQUF1QixnQkFBdkIsRUFBeUMsUUFBQSxDQUFBLENBQUE7SUFDdkMsUUFBUSxDQUFDLElBQVQsQ0FBYyxJQUFJLFNBQUosQ0FBYyxLQUFLLENBQUMsTUFBcEIsRUFBMkIsS0FBSyxDQUFDLE1BQWpDLENBQWQ7V0FDQSxRQUFRLENBQUMsSUFBVCxDQUFjLElBQUksU0FBSixDQUFjLEtBQUssQ0FBQyxNQUFwQixFQUEyQixLQUFLLENBQUMsTUFBakMsQ0FBZDtFQUZ1QyxDQUF6QztBQWxIQSIsInNvdXJjZXNDb250ZW50IjpbImNhbnZhcyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwiY2FudmFzXCIpXG5jb250ZXh0ID0gY2FudmFzLmdldENvbnRleHQoXCIyZFwiKVxuY2FudmFzLndpZHRoICA9IHdpbmRvdy5pbm5lcldpZHRoXG5jYW52YXMuaGVpZ2h0ID0gd2luZG93LmlubmVySGVpZ2h0XG5zdGFnZSA9IG5ldyBjcmVhdGVqcy5TdGFnZShjYW52YXMpXG5zdGFnZS5hdXRvQ2xlYXIgPSBmYWxzZVxuY3R4ID0gY2FudmFzLmdldENvbnRleHQoXCIyZFwiKVxuY3R4LmZpbGxTdHlsZSA9IFwicmdiYSgwLCAwLCAwLCAwKVwiXG5jdHguZmlsbFJlY3QgMCwwLGNhbnZhcy53aWR0aCxjYW52YXMuaGVpZ2h0XG5jcmVhdGVqcy5UaWNrZXIuc2V0RlBTKDUwKVxuIyBjcmVhdGVqcy5UaWNrZXIudGltaW5nTW9kZSA9IGNyZWF0ZWpzLlRpY2tlci5SQUZfU1lOQ0hFRFxuY3JlYXRlanMuVG91Y2guZW5hYmxlKHN0YWdlKVxuc3RhZ2UudXBkYXRlKClcblxuIyDph43liptcbkdSQVZJVFkgPSAxXG5cbiMg5oq15oqXXG5LID0gMC45XG5cbiMg44K544OU44O844OJXG5TUEVFRCA9IDEyXG5cbiMg6KeS5bqmKGRlZ3JlZSnjgYvjgonjg6njgrjjgqLjg7MocmFkaWFuKeOBq+WkieaPm1xuVG9SYWRpYW4gPSAoZGVncmVlKSAtPlxuICBkZWdyZWUgKiBNYXRoLlBJIC8gMTgwLjBcblxuIyDoirHngavjgpLkvZzjgorkuIrjgZLjgovjgq/jg6njgrlcbmNsYXNzIEZpcmV3b3Jrc1xuICBjb25zdHJ1Y3RvcjogKEBzeCA9IDEwMCxAc3kgPSAxMDAsQHBhcnRpY2xlcyA9IDcwKSAtPlxuICAgIEBza3kgPSBuZXcgY3JlYXRlanMuQ29udGFpbmVyKClcbiAgICBAciA9IDBcbiAgICBAaCA9IE1hdGgucmFuZG9tKCkgKiAzNjAgfCAwXG4gICAgQHMgPSAxMDBcbiAgICBAbCA9IDUwXG4gICAgQHNpemUgPSAzXG5cbiAgICBmb3IgaSBpbiBbMC4uLkBwYXJ0aWNsZXNdXG4gICAgICBzcGVlZCA9IE1hdGgucmFuZG9tKCkgKiAxMiArIDJcbiAgICAgIGNpcmNsZSA9IG5ldyBjcmVhdGVqcy5TaGFwZSgpXG4gICAgICBjaXJjbGUuZ3JhcGhpY3MuZihcImhzbGEoI3tAaH0sICN7QHN9JSwgI3tAbH0lLCAxKVwiKS5kYygwLCAwLCBAc2l6ZSlcbiAgICAgIGNpcmNsZS5zbmFwVG9QaXhlbCA9IHRydWVcbiAgICAgIGNpcmNsZS5jb21wb3NpdGVPcGVyYXRpb24gPSBcImxpZ2h0ZXJcIlxuICAgICAgcmFkID0gVG9SYWRpYW4oTWF0aC5yYW5kb20oKSAqIDM2MCB8IDApXG5cbiAgICAgIGNpcmNsZS5zZXQoe1xuICAgICAgICB4OiBAc3hcbiAgICAgICAgeTogQHN5XG4gICAgICAgIHZ4OiBNYXRoLmNvcyhyYWQpICogc3BlZWRcbiAgICAgICAgdnk6IE1hdGguc2luKHJhZCkgKiBzcGVlZFxuICAgICAgICByYWQ6IHJhZFxuICAgICAgfSlcblxuICAgICAgQHNreS5hZGRDaGlsZCBjaXJjbGVcblxuICAgIHN0YWdlLmFkZENoaWxkIEBza3lcblxuICBleHBsb2RlOiAtPlxuICAgIGlmIEBza3lcbiAgICAgICsrQGhcbiAgICAgIGZvciBwIGluIFswLi4uQHNreS5nZXROdW1DaGlsZHJlbigpXVxuICAgICAgICBjaXJjbGUgPSBAc2t5LmdldENoaWxkQXQocClcblxuICAgICAgICAjIOWKoOmAn+W6plxuICAgICAgICBjaXJjbGUudnggPSBjaXJjbGUudnggKiBLXG4gICAgICAgIGNpcmNsZS52eSA9IGNpcmNsZS52eSAqIEtcblxuICAgICAgICAjIOS9jee9ruioiOeul1xuICAgICAgICBjaXJjbGUueCArPSBjaXJjbGUudnhcbiAgICAgICAgY2lyY2xlLnkgKz0gY2lyY2xlLnZ5ICsgR1JBVklUWVxuXG4gICAgICAgICMg6ImyXG4gICAgICAgIEBsID0gTWF0aC5yYW5kb20oKSAqIDEwMFxuICAgICAgICAjIOODkeODvOODhuOCo+OCr+ODq+OBruOCteOCpOOCulxuICAgICAgICBAc2l6ZSA9IEBzaXplIC0gMC4wMDFcbiAgICAgICAgaWYgQHNpemUgPiAwXG4gICAgICAgICAgY2lyY2xlLmdyYXBoaWNzLmMoKS5mKFwiaHNsYSgje0BofSwgMTAwJSwgI3tAbH0lLCAxKVwiKS5kYygwLCAwLCBAc2l6ZSlcblxuICAgICAgaWYgQHNreS5hbHBoYSA+IDAuMVxuICAgICAgICBAc2t5LmFscGhhIC09IEsgLyA1MFxuICAgICAgZWxzZVxuICAgICAgICBzdGFnZS5yZW1vdmVDaGlsZCBAc2t5XG4gICAgICAgIEBza3kgPSBudWxsXG5cbiAgICBlbHNlXG5cbiAgICByZXR1cm5cblxuZmlyZUJvc3MgPSBbXVxuXG5zZXRJbnRlcnZhbCgtPlxuICBjdHguZmlsbFN0eWxlID0gXCJyZ2JhKDAsIDAsIDAsIDAuMSlcIlxuICBjdHguZmlsbFJlY3QgMCwwLGNhbnZhcy53aWR0aCxjYW52YXMuaGVpZ2h0XG4gIHJldHVyblxuLDQwKVxuXG5zZXRJbnRlcnZhbCgtPlxuICB4ID0gTWF0aC5yYW5kb20oKSAqIGNhbnZhcy53aWR0aCB8IDBcbiAgeSA9IE1hdGgucmFuZG9tKCkgKiBjYW52YXMuaGVpZ2h0IHwgMFxuICBmaXJlQm9zcy5wdXNoIG5ldyBGaXJld29ya3MoeCx5KVxuICBmaXJlQm9zcy5wdXNoIG5ldyBGaXJld29ya3MoeCx5KVxuLDEzMDApXG5cbnJlcGVhdCA9IC0+XG4gIGZvciBmaXJld29ya3MgaW4gWzAuLi5maXJlQm9zcy5sZW5ndGhdXG4gICAgaWYgZmlyZUJvc3NbZmlyZXdvcmtzXS5za3lcbiAgICAgIGZpcmVCb3NzW2ZpcmV3b3Jrc10uZXhwbG9kZSgpXG5cbiAgc3RhZ2UudXBkYXRlKClcblxuICByZXR1cm5cblxuY3JlYXRlanMuVGlja2VyLm9uKFwidGlja1wiLCByZXBlYXQpXG5cbnN0YWdlLmFkZEV2ZW50TGlzdGVuZXIgXCJzdGFnZW1vdXNlZG93blwiLCAtPlxuICBmaXJlQm9zcy5wdXNoIG5ldyBGaXJld29ya3Moc3RhZ2UubW91c2VYLHN0YWdlLm1vdXNlWSlcbiAgZmlyZUJvc3MucHVzaCBuZXcgRmlyZXdvcmtzKHN0YWdlLm1vdXNlWCxzdGFnZS5tb3VzZVkpIl19
        //# sourceURL=coffeescript
    </script>
</body>

</html>

 

标签:canvas,sky,ctx,烟花,createjs,ref,stage
From: https://www.cnblogs.com/yuwen1995/p/18649446

相关文章

  • 8k分辨率下html2canvas不支持文本缩放的解决方案
    文章目录背景常规方案安装依赖引入依赖使用出现问题html2canvas原理解析局限性解决方案dom-to-image库安装依赖引入dom-to-image使用dom-to-image原理创建虚拟DOM副本渲染虚拟DOM为SVG或其他格式导出为图片数据`dom-to-image`的相关方法背景前端同......
  • 【源码解读】25年跨年 一起来放个烟花吧
    跨年烟花前端代码分析最近我研究了一个跨年烟花的前端项目,代码非常有趣且复杂。通过分析这个项目,我学到了很多关于前端动画、Canvas渲染、物理模拟以及状态管理的知识。以下是我对这个项目的详细分析。项目预览地址》》源代码传送门》》跨年烟花项目概述这个项......
  • 如何快速写一个跨年放烟花的代码(动态效果)
    1.新建一个txt文档2.将以下代码复制粘贴到你新建的txt文档里面<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • 《2025烟花代码:为家人与爱人定制专属的烟花记忆》
    《2025烟花代码:为家人与爱人定制专属的烟花记忆》......
  • canvas使用方法
    <canvasid="canvas"width="600"height="600"></canvas>constcanvas=document.getElementById("canvas");constctx=canvas.getContext("2d");//获取2D渲染上下文对象ctx.fillStyle="green"......
  • 使用canvas制作一个烟花的动画效果
    要使用HTML5的<canvas>元素来制作一个烟花动画效果,你需要遵循以下步骤:设置HTML结构:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-sca......
  • 如何在canvas画布上特定位置监听鼠标事件?
    在HTML5的Canvas元素上监听特定位置的鼠标事件稍微有些复杂,因为Canvas本身是一个像素画布,它不像DOM元素那样具有内置的事件处理机制来直接处理特定位置的事件。不过,你可以通过监听Canvas元素的鼠标事件,并在事件处理函数中检查鼠标的位置来实现类似的功能。以下是一个简单的示例,展......
  • 使用canvas制作一张优惠券
    使用HTML的<canvas>元素来制作一张优惠券是一个有趣且实用的前端开发项目。以下是一个简单的步骤指南,帮助你开始制作自己的优惠券:1.创建HTML结构首先,你需要在HTML文件中创建一个<canvas>元素。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><meta......
  • 使用Canvas画一只会跟着鼠标走的小狗
    在前端开发中,使用HTML5的<canvas>元素和JavaScript来创建一个会跟随鼠标移动的小狗是一个有趣的项目。下面是一个基本的步骤指南,帮助你开始这个项目:1.设置HTML结构首先,你需要在HTML文件中创建一个<canvas>元素。<!DOCTYPEhtml><htmllang="en"><head><metacharset="U......
  • 使用canvas制作一个画板
    创建一个简单的画板应用使用HTML5的<canvas>元素是一个很好的项目,可以帮助你理解前端开发中的一些基本概念。以下是一个简单的画板应用的实现步骤:HTML结构首先,你需要在HTML中放置一个<canvas>元素,并给它一个ID,以便我们可以在JavaScript中引用它。<!DOCTYPEhtml><htmllang=......