HTML5 Canvas 北京的园林和雾霾动画特效

这伸手不见五指算新雾都的正常天气吗? 通过调整particleCount参数，可以调整PM2.5，帮助首都清理环境：）

fog,haze

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// Create an array to store our particles
var particles = [];

// The amount of particles to render
var particleCount = 50;

// The maximum velocity in each direction
var maxVelocity = 5;

// The target frames per second (how often do we want to update / redraw the scene)
var targetFPS = 33;

// Set the dimensions of the canvas as variables so they can be used.
var canvasWidth = document.body.scrollWidth;
var canvasHeight = document.body.scrollHeight;

// Create an image object (only need one instance)
var imageObj = new Image();

// Once the image has been downloaded then set the image on all of the particles
imageObj.onload = function() {
    particles.forEach(function(particle) {
        particle.setImage(imageObj);
    });
};

// Once the callback is arranged then set the source of the image
imageObj.src = "/uploads/151001/smoke.png";

// A function to create a particle object.
function Particle(context) {

// Set the initial x and y positions
    this.x = 0;
    this.y = 0;

// Set the initial velocity
    this.xVelocity = 0;
    this.yVelocity = 0;

// Set the radius
    this.radius = 5;

// Store the context which will be used to draw the particle
    this.context = context;

// The function to draw the particle on the canvas.
    this.draw = function() {

// If an image is set draw it
        if (this.image) {
            this.context.globalAlpha = 0.15;
            this.context.drawImage(this.image, this.x - 128, this.y - 128);
            // If the image is being rendered do not draw the circle so break out of the draw function                
            return;
        }
    };

// Update the particle.
    this.update = function() {
        // Update the position of the particle with the addition of the velocity.
        this.x += this.xVelocity;
        this.y += this.yVelocity;

// Check if has crossed the right edge
        if (this.x >= canvasWidth) {
            this.xVelocity = -this.xVelocity;
            this.x = canvasWidth;
        }
        // Check if has crossed the left edge
        else if (this.x <= 0) {
            this.xVelocity = -this.xVelocity;
            this.x = 0;
        }

// Check if has crossed the bottom edge
        if (this.y >= canvasHeight) {
            this.yVelocity = -this.yVelocity;
            this.y = canvasHeight;
        }

// Check if has crossed the top edge
        else if (this.y <= 0) {
            this.yVelocity = -this.yVelocity;
            this.y = 0;
        }
    };

// A function to set the position of the particle.
    this.setPosition = function(x, y) {
        this.x = x;
        this.y = y;
    };

// Function to set the velocity.
    this.setVelocity = function(x, y) {
        this.xVelocity = x;
        this.yVelocity = y;
    };

this.setImage = function(image) {
        this.image = image;
    }
}

// A function to generate a random number between 2 values
function generateRandom(min, max) {
    return Math.random() * (max - min) + min;
}

// The canvas context if it is defined.
var context;

// Initialise the scene and set the context if possible
function init() {

var canvas = document.getElementById('myCanvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

if (canvas.getContext) {

// Set the context variable so it can be re-used
        context = canvas.getContext('2d');
        //context.globalCompositeOperation = "lighter";
        // Create the particles and set their initial positions and velocities
        for (var i = 0; i < particleCount; ++i) {
            var particle = new Particle(context);

// Set the position to be inside the canvas bounds
            particle.setPosition(generateRandom(0, canvasWidth), generateRandom(0, canvasHeight));

// Set the initial velocity to be either random and either negative or positive
            particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
            particles.push(particle);
        }
    } else {
        alert("Please use a modern browser");
    }
}

// The function to draw the scene
function draw() {
    // Clear the drawing surface and fill it with a black background
    //context.fillStyle = "rgba(255, 255, 255, 0.2)";
    //context.fillRect(0, 0, canvasWidth, canvasHeight);

// Go through all of the particles and draw them.
    particles.forEach(function(particle) {
        particle.draw();
    });
}

// Update the scene
function update() {
    particles.forEach(function(particle) {
        particle.update();
    });
}

// Initialize the scene
init();

// If the context is set then we can draw the scene (if not then the browser does not support canvas)
if (context) {
    setInterval(function() {
        // Update the scene befoe drawing
        update();

// Draw the scene
        draw();
    }, 1000 / targetFPS);
}

编译

CSS

HTML

这伸手不见五指算新雾都的正常天气吗? 通过调整particleCount参数，可以调整PM2.5，帮助首都清理环境：）

fog,haze

编辑器支持Emmet

快捷键

这伸手不见五指算新雾都的正常天气吗? 通过调整particleCount参数，可以调整PM2.5，帮助首都清理环境：）

fog,haze

使用WebGL着色器和noise算法实现的浓雾云彩喷薄动画特效

CSS3加图片实现的雾气弥漫动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：