使用HTML5/Canvas制作云朵（烟雾）动画特效

Canvas Clouds，飘浮的云海。可用来作为网页动画背景。

canvas, cloud

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

(function(main) {

main(this, document, jQuery, undefined);

})(function(window, document, $) {

var canvas, ctx, dimensions, center,
        background, clouds, cloudCount = 100,
        transparency = 0.15,
        imgData, imgs = [],
        totalImgs = 5,
        counter = 1,
        baseURL = 'http://www.seanalexanderfree.com/codepen/sky/';

var Vector2 = (function() {
        function Vector2(x, y) {
            this.x = x || 0;
            this.y = y || 0;
        }
        return Vector2;
    })();

Vector2.prototype.add = function(vec) {
        this.x += vec.x;
        this.y += vec.y;
    };

Cloud.prototype.init = function() {
        this.sprite = imgs[Math.floor(Math.random() * imgs.length)];
        this.scale = 0.5 + Math.random() * 3;
        this.width = this.sprite.width / this.scale;
        this.height = this.sprite.height / this.scale;
        this.position = new Vector2(-this.width, center.y - this.height / 3 + (200 - Math.random() * 400));
        this.velocity = new Vector2(1 + Math.random() * 1, 0);
    };

Cloud.prototype.update = function() {
        if (this.position.x > dimensions.width || this.x < -this.width || this.position.y < -this.height) {
            this.init();
        } else {
            this.position.add(this.velocity);
            this.life++;
        }
    };

function populate() {
        clouds = [];
        for (var i = 0; i < cloudCount; i++) {
            clouds.push(new Cloud());
        }
    }

function resize() {
        dimensions = {
            width: window.innerWidth,
            height: window.innerHeight
        };
        center = new Vector2(
            dimensions.width / 2,
            dimensions.height / 2
        );
        canvas.main.width = canvas.os.width = dimensions.width;
        canvas.main.height = canvas.os.height = dimensions.height;
        background = ctx.os.createLinearGradient(center.x, 0, center.x, dimensions.height);
        background.addColorStop(0, '#90caf9');
        background.addColorStop(1, '#e3f2fd');
    }

function loop() {
        draw();
        window.requestAnimationFrame(loop);
    }

window.onresize = resize;

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

编译

CSS

HTML

Canvas Clouds，飘浮的云海。可用来作为网页动画背景。

canvas, cloud

编辑器支持Emmet

快捷键

Canvas Clouds，飘浮的云海。可用来作为网页动画背景。

canvas, cloud

使用HTML5 Canvas制作超炫动态电子艺术画作（风景画）

在HTML5 Canvas 2D上绘制云雾中的电流动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：