Canvas 随机网格艺术图案生成动画

HTML5 Canvas Random Grid Art

canvas, grid

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// CONFIG //
var BackgroundColor = "#02080D";
var LineJoin = "miter";
var IntervalTime = 50;

// disable this to configure anything below
var RandomConfig = true;

var GridSize = 20;
var Linewidth = 0.5;
var StartLines = 20;
var Composite = "difference";

// DEFINITIONS //
var canvas,
    ctx,
    lines,
    drawer;

// CODE //
main();

canvas.addEventListener("dblclick", main);

function main() {
    if (RandomConfig) randomConfig();
    init();
    lines = [];
    for (i = 0; i < StartLines; i++)
        startLine(canvas.width / 2, canvas.height / 2);

drawer = setInterval(step, IntervalTime);
}

function randomConfig() {
    GridSize = rnd(1, 50);
    Linewidth = rnd(0.1, 30);
    StartLines = rnd(10, 30);
    CompositeOptions = ["difference", "xor", "source-over"];
    Composite = CompositeOptions[Math.round(rnd(0, CompositeOptions.length - 1))];
}

function rnd(from, to) {
    return (Math.random() * (to - from)) + from;
}

/* code here */

// FUNCTIONS //
function init() {
    // load canvas & context
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// draw background
    ctx.fillStyle = BackgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.lineJoin = LineJoin;
    ctx.lineWidth = Linewidth;
    ctx.globalCompositeOperation = Composite;
}

function startLine(x, y) {
    var line = {};
    line.X = x;
    line.Y = y;
    line.Color = randColor();

lines.push(line);
    return line;
}

var path = new Path2D();
    path.moveTo(startX, startY);
    path.lineTo(line.X, line.Y);
    ctx.strokeStyle = line.Color;
    ctx.stroke(path);

return line;
}

function step() {
    lines.forEach(function(line, index) {
        // just regular movement
        var line = stepLine(line);
        lines[index] = line;
    });
}

function randColor() {
    return 'rgb(' + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
}

编译

CSS

HTML

HTML5 Canvas Random Grid Art

canvas, grid

编辑器支持Emmet

快捷键

HTML5 Canvas Random Grid Art

canvas, grid

Canvas 随机生成美丽的雪花图案

Canvas 使用随机像素颜色填充网格动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：