Canvas 很棒的蓝色广场喷泉/山间瀑布

Canvas fountain

canvas，喷泉

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

第三方库
作品简介 3143
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById('canvas'),
    c = canvas.getContext("2d"),
    particles = {},
    particleIndex = 0,
    particleNum = 50,
    gravity = 0.7;

// full screen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// particle
function Particle() {

this.posX = canvas.width / 2; // position X
    this.posY = canvas.height / 8; // position Y
    this.vx = Math.random() * 10 - 5; // velocity X
    this.vy = Math.random() * 10 - 5; // velocity Y
    this.width = 1; // particle width
    this.height = Math.random() * 6 - 3; // particle height

particleIndex++;
    particles[particleIndex] = this;
    this.id = particleIndex;

this.life = 0;
    this.death = 140;

//random color
    this.colors = [
        "rgba(100, 100, 100," + (Math.random() + .5) + ")",
        "rgba(52, 152, 200," + (Math.random() + .5) + ")",
        "rgba(41, 128, 250," + (Math.random() + .5) + ")"
    ];
    this.color = this.colors[Math.floor(Math.random() * 3)];
}

// draw
Particle.prototype.draw = function() {
    this.posX += this.vx;
    this.posY += this.vy;

this.life++;

if (this.life >= this.death) {
        delete particles[this.id];
    }

if (this.posY > (canvas.height - 5)) {
        this.vx *= 0.8;
        this.vy *= -0.5;
        this.posY = (canvas.height - 5);
    }

this.vy += gravity;

c.fillStyle = this.color;
    c.fillRect(this.posX, this.posY, this.width, this.height);
}

setInterval(function() {
    c.fillStyle = "rgba(0,0,0,0.4)";
    c.fillRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < particleNum; i++) {
        new Particle();
    }

for (var i in particles) {
        particles[i].draw();
    }
}, 30);

编译

CSS

HTML

Canvas fountain

canvas，喷泉

编辑器支持Emmet

快捷键

Canvas fountain

canvas，喷泉

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：