HTML5/Canvas交互式火焰元素

Elements Fire, 使用鼠标点击画布产生火焰元素，点击越快火势越大。

canvas, fire

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 7966
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/* jshint esversion: 6 */
((window, document, lib, undefined) => {

'use strict';

this.requestAnimationFrame = (() => {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();

const RAND = Math.random,
        COS = Math.cos,
        SIN = Math.sin,
        PI = Math.PI,
        TAU = PI * 2;

class Particle extends lib.v2 {
        constructor(x, y) {
            super(x, y);
            this.noiseVelocity = new lib.v2();
            this.baseVelocity = new lib.v2(1 - RAND() * 2, RAND() * 4)
        }
        update() {
            if (this.baseVelocity.y > -5) {
                this.baseVelocity.y -= 0.2;
            }
            this.add(this.baseVelocity).add(this.noiseVelocity);
        }
    }

class App {
        constructor() {
            this.mouseOver = false;
            this.mouse = new lib.v2();
            this.base = new lib.v2();
            this.position = new lib.v2();
            this.canvas = document.querySelector('.mycanvas');
            this.ctx = this.canvas.getContext('2d');
            this.tick = 0;
            this.particles = [];
            let self = this;
            window.onresize = () => {
                self.resize();
            };
            window.onmousemove = (e) => {
                this.mouseHandler(e);
            };
            window.onmouseout = (e) => {
                this.mouseHandler(e);
            };
            window.onclick = (e) => {
                this.mouseHandler(e);
            };
            this.resize();
            this.loop();
        }

resize() {
            this.width = this.canvas.width = window.innerWidth;
            this.height = this.canvas.height = window.innerHeight;
            this.base.x = this.width / 2;
            this.base.y = this.height - 100;
        }

mouseHandler(e) {
            this.mouse.x = e.clientX;
            this.mouse.y = e.clientY;
            if (e.type === 'mousemove') {
                this.mouseOver = true;
            }
            if (e.type === 'click') {
                for (let i = 0; i < 20; i++) {
                    let p = new Particle(e.clientX, e.clientY);
                    p.baseVelocity = new lib.v2(6 - RAND() * 12, RAND() * 8)
                    this.particles.push(p);
                }
            }
            if (e.type === 'mouseout') {
                this.mouseOver = false;
            }
        }

render() {
            let delta = this.tick * 0.2;
            this.tick++;
            this.ctx.fillStyle = 'rgba(0,0,0,1)';
            this.ctx.fillRect(0, 0, this.width, this.height);
            this.particles.push(new Particle(this.position.x, this.position.y));
            this.ctx.save();
            for (let i = this.particles.length - 1; i > 0; i--) {
                let p = this.particles[i],
                    opacity = (p.y / window.innerHeight).toFixed(2),
                    theta = ((lib.noise.simplex3(p.x * 0.002, p.y, this.tick) + 1) / 2) * PI,
                    velocity = new lib.v2(COS(theta) * 20, SIN(theta) * -5);
                p.noiseVelocity.lerp(velocity);
                p.update();
                this.ctx.fillStyle = 'hsla(40,50%,50%,' + opacity + ')';
                this.ctx.fillRect(p.x - i / 4, p.y - 30, i / 2, 60);
                if (p.y < 0) {
                    this.particles.splice(i, 1);
                }
            }
            this.ctx.restore();
            if (this.mouseOver) {
                this.position.lerp(this.mouse);
            } else {
                this.position.lerp(this.base);
            }
        }

loop() {
            let self = this;
            self.render();
            window.requestAnimationFrame(self.loop.bind(self));
        }
    }

this.onload = () => {
        let app = new App();
    };

})(this, document, {
    v2: Vector2,
    noise: noise
});

编译

CSS

HTML

Elements Fire, 使用鼠标点击画布产生火焰元素，点击越快火势越大。

canvas, fire

编辑器支持Emmet

快捷键

Elements Fire, 使用鼠标点击画布产生火焰元素，点击越快火势越大。

canvas, fire

HTML5 Canvas使用分形算法实现交互式花形图案自动绘制

HTML5/Canvas 火焰和燃烧的骷髅头

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：