Canvas 三角蛇形发散动画

grayscale triangle snakes

canvas，triangle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),

opts = {

count: 50,
        variation: .3,
        baseLife: 50,
        addedLife: 20,

cx: w / 2,
        cy: h / 2,

repaintAlpha: .1
    },

snakes = [],
    first = true;

function init() {

snakes.length = 0;

ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, w, h);

if (first) {

anim();
        first = false;
    }
}

function anim() {

window.requestAnimationFrame(anim);

update();
    render();
}

function update() {

if (snakes.length < opts.count && Math.random() < .1)
        snakes.push(new Snake);

snakes.map(function(snake) {
        snake.update();
    });
}

function render() {

ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
    ctx.fillRect(0, 0, w, h);

snakes.map(function(snake) {
        snake.render();
    });
}

function Snake() {

this.reset();
}
Snake.prototype.reset = function() {

this.x1 = opts.cx + Math.random();
    this.x2 = opts.cx + Math.random();
    this.x3 = opts.cx + Math.random();
    this.y1 = opts.cy + Math.random();
    this.y2 = opts.cy + Math.random();
    this.y3 = opts.cy + Math.random();

this.rad = Math.random() * Math.PI * 2;

this.direction = Math.random() < .5 ? 1 : -1;
    this.size = 1;
    this.life = opts.baseLife + Math.random() * opts.addedLife;
}

Snake.prototype.update = function() {

--this.life;

this.size += 1 * (Math.random() / 2 + .5);
    this.direction *= -1;
    this.rad += Math.random() * opts.variation * (Math.random() < .5 ? 1 : -1) + Math.PI / 2 * this.direction;

var x4 = this.x3 + Math.cos(this.rad) * this.size,
        y4 = this.y3 + Math.sin(this.rad) * this.size;

this.x1 = this.x2;
    this.y1 = this.y2;
    this.x2 = this.x3;
    this.y2 = this.y3;
    this.x3 = x4;
    this.y3 = y4;

if (this.life <= 0 || this.x1 > w || this.x1 < 0 || this.y1 > h || this.y1 < 0) this.reset();
}
Snake.prototype.render = function() {

ctx.fillStyle = 'hsla(0, 0%, light%, .5)'.replace('light', 25 + Math.random() * 50);
    ctx.beginPath();
    ctx.moveTo(this.x1, this.y1);
    ctx.lineTo(this.x2, this.y2);
    ctx.lineTo(this.x3, this.y3);
    ctx.fill();
}

init();

编译

CSS

HTML

grayscale triangle snakes

canvas，triangle

编辑器支持Emmet

快捷键

grayscale triangle snakes

canvas，triangle

Canvas 旋转发光的宝蓝色发卡

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：