Canvas 随机生成花蕊图案

点击画布触发不规则圆形图案的生成。

canvas，花

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var c = document.getElementById('c'),
    ctx = c.getContext('2d');

function draw() {
    /** clear canvas */
    ctx.clearRect(0, 0, c.width, c.height);
    /** generate */
    generate();
}

pointList.first.next = lastPoint;
    for (var i = 0; i < iterations; i++) {
        point = pointList.first;
        while (point.next != null) {
            nextPoint = point.next;

dx = nextPoint.x - point.x;
            newX = 0.5 * (point.x + nextPoint.x);
            newY = 0.5 * (point.y + nextPoint.y);
            newY += dx * (Math.random() * 2 - 1);

var newPoint = {
                x: newX,
                y: newY
            };

//min, max
            if (newY < minY) {
                minY = newY;
            } else if (newY > maxY) {
                maxY = newY;
            }

//put between points
            newPoint.next = nextPoint;
            point.next = newPoint;

point = nextPoint;
        }
    }

//normalize to values between 0 and 1
    if (maxY != minY) {
        var normalizeRate = 1 / (maxY - minY);
        point = pointList.first;
        while (point != null) {
            point.y = normalizeRate * (point.y - minY);
            point = point.next;
        }
    }
    //unlikely that max = min, but could happen if using zero iterations. In this case, set all points equal to 1.
    else {
        point = pointList.first;
        while (point != null) {
            point.y = 1;
            point = point.next;
        }
    }

return pointList;
}

function generate() {
    var centerX, centerY;
    var r, g, b, a;
    var color0, color1;
    var lineW;
    var maxRad, minRad;
    var phase;

centerX = window.innerWidth / 2;
    centerY = window.innerHeight / 2;

var numCircles = 8;
    var startAlpha = 55 / 255;
    var endAlpha = 32 / 255;

for (var i = 0; i < numCircles; i++) {
        maxRad = 20 + (i + 1) / numCircles * 220;
        minRad = 20 + (0.85 + 0.15 * Math.random()) * i / numCircles * 220;

r = Math.floor(Math.random() * 255);
        g = Math.floor(Math.random() * 255);
        b = Math.floor(Math.random() * 255);
        //square-rooting the parameter moves the alpha towards transparent more rapidly. 
        a = startAlpha + (i / (numCircles - 1)) * (endAlpha - startAlpha);
        a0 = 0.67 * a;

//very subtle radial gradient							
        color1 = "rgba(" + r + "," + g + "," + b + "," + a + ")";
        color0 = "rgba(" + r + "," + g + "," + b + "," + a0 + ")";
        grad = ctx.createRadialGradient(centerX, centerY, 0.67 * maxRad, centerX, centerY, maxRad);
        grad.addColorStop(0, color0);
        grad.addColorStop(1, color1);
        ctx.fillStyle = grad;

grad = "rgba(" + r + "," + g + "," + b + "," + a0 + ")";

phase = Math.random() * Math.PI * 2;

drawCircle(centerX, centerY, minRad, maxRad, phase, color1, grad);
    }
}

function drawCircle(centerX, centerY, minRad, maxRad, phase, lineColor, fill) {
    var point;
    var rad, theta;
    var twoPi = 2 * Math.PI;
    var x0, y0;

//generate the random function that will be used to vary the radius, 9 iterations of subdivision
    var pointList = setLinePoints(9);

ctx.strokeStyle = lineColor;
    ctx.lineWidth = 1;
    ctx.fillStyle = fill;
    ctx.beginPath();
    point = pointList.first;
    theta = phase;
    rad = minRad + point.y * (maxRad - minRad);
    x0 = centerX + rad * Math.cos(theta);
    y0 = centerY + rad * Math.sin(theta);
    ctx.lineTo(x0, y0);

while (point.next != null) {
        point = point.next;
        theta = twoPi * point.x + phase;
        rad = minRad + point.y * (maxRad - minRad);
        x0 = centerX + rad * Math.cos(theta);
        y0 = centerY + rad * Math.sin(theta);
        ctx.lineTo(x0, y0);
    }
    ctx.stroke();
    ctx.fill();
}

function init() {
    var bodyRect = document.body.getBoundingClientRect();
    c.width = bodyRect.width;
    c.height = bodyRect.height;

generate();
    c.addEventListener("click", draw, false);
    window.addEventListener('resize', init, false);
}

init();

编译

CSS

HTML

点击画布触发不规则圆形图案的生成。

canvas，花

编辑器支持Emmet

快捷键

点击画布触发不规则圆形图案的生成。

canvas，花

Sketch.js 超炫的花束/花环变幻

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：