曼德尔布罗特集合的局部放大，展现分形图形的魅力。
今天用JS+Canvas来实现曼德尔布罗特集合局部放大的算法

HTML部分

<div id="canvas_wrapper" style="overflow:auto;"></div>

javascript部分

var $canvas,canvas,context;
draw();
function draw(){
    var w = 1024;
    var h = w;
    $canvas = $("<canvas>");
    $canvas.attr("id","canvas");
    $canvas.attr("width",w);
    $canvas.attr("height",h);
    $canvas.appendTo("#canvas_wrapper");
    canvas = $canvas[0];
    context = canvas.getContext("2d");
    var imageData = context.createImageData(canvas.width, canvas.height);
    var pixelData = imageData.data;
    for (var i = 0; i < canvas.height; i++) {
        for (var j = 0; j < canvas.width; j++) {
            var a = 0,
            b = 0,
            c, d, n = 0;
            var p = j * canvas.width + i;
            while ((c = a * a) + (d = b * b) < 4 && n++<880) {
                b = 2 * a * b + j * 8e-9 - .645411;
                a = c - d + i * 8e-9 + .356888;
            }
            pixelData[4 * p + 0] = 255 * Math.pow((n - 80) / 800, 3.0);
            pixelData[4 * p + 1] = 255 * Math.pow((n - 80) / 800, 0.7);
            pixelData[4 * p + 2] = 255 * Math.pow((n - 80) / 800, 0.5);
            pixelData[4 * p + 3] = 255;
        }
    }
    context.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height);
}

最终效果