HTML5 Canvas下雪动画

今天是2016年阴历小雪

html5, snow

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
var snows1 = [];
var snows2 = [];
var snows3 = [];
var speed1 = 0.2;
var speed2 = 0.9;
var speed3 = 2;
var Snow1 = function(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
}
Snow1.prototype.update = function() {
    if (this.y > height * 0.9) {
        snows1.shift();
        snows1.push(new Snow1(getRandomInt(0, width), getRandomInt(0, height * 0.4), 1));
    }
    this.x -= getRandomInt(0, speed1);
    this.y += getRandomInt(0, speed1);

ctx.beginPath();
    ctx.fillStyle = "#efefef";
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
}
Snow1.prototype.onresize = function() {
    this.x = getRandomInt(0, width);
    this.y = getRandomInt(0, height * 0.4);
}

var Snow2 = function(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
}
Snow2.prototype.update = function() {
    if (this.y > height * 0.9) {
        snows2.shift();
        snows2.push(new Snow2(getRandomInt(0, width), getRandomInt(0, height * 0.4), getRandomInt(1, 3)));
    }
    this.x -= getRandomInt(0, speed2);
    this.y += getRandomInt(0, speed2);

ctx.beginPath();
    ctx.fillStyle = "#efefef";
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
}
Snow2.prototype.onresize = function() {
    this.x = getRandomInt(0, width);
    this.y = getRandomInt(0, height * 0.4);
}

var Snow3 = function(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
}
Snow3.prototype.update = function() {
    if (this.y > height * 0.9) {
        snows3.shift();
        snows3.push(new Snow3(getRandomInt(0, width), getRandomInt(0, height * 0.4), getRandomInt(1, 5)));
    }
    this.x -= getRandomInt(0, speed3);
    this.y += getRandomInt(0, speed3);

ctx.beginPath();
    ctx.fillStyle = "#efefef";
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
}
Snow3.prototype.onresize = function() {
    this.x = getRandomInt(0, width);
    this.y = getRandomInt(0, height * 0.4);
}

init();

function getRandomInt(min, max) {
    return (Math.random() * (max - min + 1)) + min;
}

编译

CSS

HTML

今天是2016年阴历小雪

html5, snow

编辑器支持Emmet

快捷键

今天是2016年阴历小雪

html5, snow

HTML5 Canvas带镜像特效的下雨动画

HTML5 Canvas圆形相交（交点）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：