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

这个方法用来生成开裂的洞口或毛刺状圆球比较合适，但不适合生成柔和平滑表面的不规则圆球（比如雨滴）。你可以调整points变量的取值来试试看。

canvas，circle，教程

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

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();
    }

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;

drawCircle(centerX, centerY, minRad, maxRad);

}

function drawCircle(centerX, centerY, minRad, maxRad) {
        var points = 512;
        var rad, theta;
        var twoPi = 2 * Math.PI;
        var x0, y0;

context.strokeStyle = "#aa6699";
        context.lineWidth = 1.01;
        context.fillStyle = "#6633aa";
        context.beginPath();
        theta = 0;
        x0 = centerX + rad * Math.cos(theta);
        y0 = centerY + rad * Math.sin(theta);
        context.lineTo(x0, y0);
        for (var i = 0; i < points; i++) {
            theta += twoPi / points;
            rad = minRad + Math.random() * (maxRad - minRad);
            x0 = centerX + rad * Math.cos(theta);
            y0 = centerY + rad * Math.sin(theta);
            context.lineTo(x0, y0);
        }
        context.stroke();
        context.fill();
    }

}

编译

CSS

HTML

这个方法用来生成开裂的洞口或毛刺状圆球比较合适，但不适合生成柔和平滑表面的不规则圆球（比如雨滴）。你可以调整points变量的取值来试试看。

canvas，circle，教程

编辑器支持Emmet

快捷键

这个方法用来生成开裂的洞口或毛刺状圆球比较合适，但不适合生成柔和平滑表面的不规则圆球（比如雨滴）。你可以调整points变量的取值来试试看。

canvas，circle，教程

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：