html5 随机 圆 不重叠,使用HTML5 Canvas和分形算法生成不完美圆形

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

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

//for debug messages

var Debugger = function() { };

Debugger.log = function(message) {

try {

console.log(message);

}

catch (exception) {

return;

}

}

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

theCanvas.addEventListener("click", clickListener, false);

}

function clickListener(evt) {

context.clearRect(0,0,theCanvas.width,theCanvas.height);

generate();

//code below prevents the mouse down from having an effect on the main browser window:

if (evt.preventDefault) {

evt.preventDefault();

} //standard

else if (evt.returnValue) {

evt.returnValue = false;

} //older IE

return false;

}

function setLinePoints(iterations) {

var pointList = {};

pointList.first = {x:0, y:1};

var lastPoint = {x:1, y:1}

var minY = 1;

var maxY = 1;

var point;

var nextPoint;

var dx, newX, newY;

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 color;

var lineW;

var maxRad, minRad;

var phase;

for (var i = 0; i < 20; i++) {

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

minRad = 0.88*maxRad;

centerX = maxRad + Math.random()*(displayWidth-2*maxRad);

centerY = maxRad + Math.random()*(displayHeight-2*maxRad);

r = Math.floor(Math.random()*255);

g = Math.floor(Math.random()*255);

b = Math.floor(Math.random()*255);

a = 0.4;

color = "rgba("+r+","+g+","+b+","+a+")";

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

drawCircle(centerX, centerY, minRad, maxRad, phase, color);

}

}

function drawCircle(centerX, centerY, minRad, maxRad, phase, color) {

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

context.strokeStyle = color;

context.lineWidth = 1.01;

context.fillStyle = color;

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

}

}