HTML5/Canvas创建多层画布的梦幻泡沫动画

Layered Canvas, 使用多层canvas来创建有远近层次感的场景动画。

html5, bubble

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* jshint esversion: 6 */
((main) => {

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

main(this, document, Vector2);

})((window, document, v2, undefined) => {

'use strict';

const PI = Math.PI,
        TAU = PI * 2;

const APP_DEFAULTS = {
        particleCount: 600,
        particleColor: 'rgba(200,200,230,0.5)'
    };

class Particle {
        constructor(size, speed, context, bounds) {
            this.size = size;
            this.ctx = context;
            this.bounds = bounds;
            this.position = new v2();
            this.position.randomize(bounds);
            this.velocity = new v2(0, speed);
            this.velocity.y -= Math.random();
        }

reset() {
            this.position.y = this.bounds.y + this.size;
            this.position.x = Math.random() * this.bounds.x;
        }

update() {
            this.position.add(this.velocity);
            if (this.position.y < -this.size) {
                this.reset();
            }
        }
    }

class App {
        constructor() {
            this.setup();
            this.getCanvas();
            this.resize();
            this.populate();
            this.render();
        }

setup() {
            let self = this;
            self.props = Object.assign({}, APP_DEFAULTS);
            self.dimensions = new v2();
            window.onresize = () => {
                self.resize();
            };
        }

getCanvas() {
            this.canvas = {
                back: document.querySelector('.back'),
                mid: document.querySelector('.mid'),
                front: document.querySelector('.front')
            };

this.ctx = {
                back: this.canvas.back.getContext('2d'),
                mid: this.canvas.mid.getContext('2d'),
                front: this.canvas.front.getContext('2d')
            };
        }

resize() {
            for (var c in this.canvas) {
                this.canvas[c].width = this.dimensions.x = window.innerWidth;
                this.canvas[c].height = this.dimensions.y = window.innerHeight;
            }
        }

populate() {
            this.particles = [];
            for (let i = 0; i < this.props.particleCount; i++) {
                let pCtx = i < 300 ? this.ctx.back : i < 500 ? this.ctx.mid : this.ctx.front,
                    size = i < 300 ? 5 : i < 500 ? 8 : 12,
                    speed = i < 300 ? -0.5 : i < 500 ? -1 : -2,
                    particle = new Particle(size, speed, pCtx, this.dimensions);
                this.particles.push(particle);
            }
        }

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

draw() {
            for (var c in this.ctx) {
                this.ctx[c].clearRect(0, 0, this.dimensions.x, this.dimensions.y);
            }
            for (let i = 0, len = this.particles.length; i < len; i++) {
                let p = this.particles[i];
                p.update();
                p.ctx.beginPath();
                p.ctx.fillStyle = this.props.particleColor;
                p.ctx.arc(p.position.x, p.position.y, p.size, 0, TAU);
                p.ctx.fill();
                p.ctx.closePath();
            }
        }
    }

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

});

编译

CSS

HTML

Layered Canvas, 使用多层canvas来创建有远近层次感的场景动画。

html5, bubble

编辑器支持Emmet

快捷键

Layered Canvas, 使用多层canvas来创建有远近层次感的场景动画。

html5, bubble

使用HTML5 Canvas绘制梦幻般的水母动画

HTML5/Canvas实现的角色控制动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：