使用Canvas和分形算法生成不完美圆形

这个方法用比简单的随机数函数得到的不规则圆球要柔和平滑得多，适合建模雨滴、熔浆、金属融化液、曲折连绵的海岸线，漂浮的云朵、面团等物体。

canvas，circle，教程

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* 本例教程：http://techbrood.com/news/117 */

window.addEventListener("load", windowLoadHandler, false);

function windowLoadHandler() {
    canvasApp();
}

function canvasSupport() {
    return Modernizr.canvas;
}

function canvasApp() {
    if (!canvasSupport()) {
        return;
    }

var theCanvas = document.getElementById("canvasOne");
    var context = theCanvas.getContext("2d");
    var displayWidth = theCanvas.width;
    var displayHeight = theCanvas.height;

init();

function init() {
        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 maxRad, minRad;
        var phase;

maxRad = 50 + Math.random() * 50;
        minRad = 0.88 * maxRad;

centerX = (displayWidth - maxRad) / 2;
        centerY = (displayHeight - maxRad) / 2;

phase = Math.random() * Math.PI * 2;
        drawCircle(centerX, centerY, minRad, maxRad, phase);

}

function drawCircle(centerX, centerY, minRad, maxRad, phase) {
        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, will return exp(2,9)=512 points
        var pointList = setLinePoints(9);
        context.strokeStyle = "#aa6699";
        context.lineWidth = 1.01;
        context.fillStyle = "#6633aa";
        context.beginPath();
        point = pointList.first;
        theta = phase;
        rad = minRad + point.y * (maxRad - minRad);
        x0 = centerX + rad * Math.cos(theta);
        y0 = centerY + rad * Math.sin(theta);
        context.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);
            context.lineTo(x0, y0);
        }
        context.stroke();
        context.fill();
    }

}

编译

CSS

HTML

这个方法用比简单的随机数函数得到的不规则圆球要柔和平滑得多，适合建模雨滴、熔浆、金属融化液、曲折连绵的海岸线，漂浮的云朵、面团等物体。

canvas，circle，教程

编辑器支持Emmet

快捷键

这个方法用比简单的随机数函数得到的不规则圆球要柔和平滑得多，适合建模雨滴、熔浆、金属融化液、曲折连绵的海岸线，漂浮的云朵、面团等物体。

canvas，circle，教程

使用Canvas和简单随机函数生成不完美圆形

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：