html5画分形图形,HTML5/Canvas 可在线调整的朱丽叶分形图

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var scale = 200;

var cR = -.8,

cI = .2;

var r = 0.77,

θ = 169;

var ctrl = document.querySelector('.ctrl');

var c = document.querySelector('.c');

ctrl.addEventListener('input', function(e) {

var input = e.target;

var span = input.nextElementSibling;

span.innerHTML = input.value;

if (input.name == "r")

r = +input.value;

else if (input.name == "θ")

θ = +input.value;

calcC();

init();

});

function calcC() {

cR = Math.cos(θ * Math.PI / 180) * r;

cI = Math.sin(θ * Math.PI / 180) * r;

c.innerHTML = Math.round(cR * 100) / 100 + ' + ' + Math.round(cI * 100) / 100 + 'i';

}

var canvas = document.querySelector('canvas'),

ctx = canvas.getContext("2d"),

WIDTH,

HEIGHT,

z,

c,

ing = 60,

x = 0,

y = 0,

pass = [

//[ 0, 0,64,64,64,64],

[0, 0, 32, 32, 32, 32],

/*[32, 0,64,64,32,64],

[32,32,64,64,32,32],

[ 0,32,64,64,32,32],*/

[16, 0, 32, 32, 16, 32],

[16, 16, 32, 32, 16, 16],

[0, 16, 32, 32, 16, 16],

[8, 0, 16, 16, 8, 16],

[8, 8, 16, 16, 8, 8],

[0, 8, 16, 16, 8, 8],

[4, 0, 8, 8, 4, 8],

[4, 4, 8, 8, 4, 4],

[0, 4, 8, 8, 4, 4],

[2, 0, 4, 4, 2, 4],

[2, 2, 4, 4, 2, 2],

[0, 2, 4, 4, 2, 2],

[1, 0, 2, 2, 1, 2],

[1, 1, 2, 2, 1, 1],

[0, 1, 2, 2, 1, 1],

],

p = 0;

var id = ctx.createImageData(1, 1);

var d = id.data;

d[3] = 255;

window.addEventListener('resize', resize);

var to;

var dr = false;

calcC();

resize();

function resize() {

WIDTH = canvas.width = window.innerWidth;

HEIGHT = canvas.height = window.innerHeight;

init();

}

function init() {

p = 0;

x = 0;

y = 0;

cancelAnimationFrame(to);

run();

};

function run() {

var t = Date.now();

while (pass[p]) {

if (dr || Date.now() - t > 300) {

dr = false;

to = requestAnimationFrame(run, 0);

break;

} else

loop();

}

}

function loop() {

draw();

x += pass[p][2];

if (x > WIDTH) {

x = pass[p][0] - pass[p][2];

y += pass[p][3];

if (y > HEIGHT) {

dr = true;

if (pass[++p])

y = pass[p][1] - pass[p][3];

}

}

}

function draw() {

green = ing;

//var cR = (x-WIDTH/2) / scale;

//var cI = (y-HEIGHT/2) / scale;

var zR = (x - WIDTH / 2) / scale;

var zI = (y - HEIGHT / 2) / scale;

//julia:

//cR = -.8;

//cI = .2;

var zR2;

var zI2;

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

zR2 = zR * zR;

zI2 = zI * zI;

zI = 2 * zR * zI + cI;

zR = zR2 - zI2 + cR;

if (zR2 + zI2 > 4) {

break;

}

}

s = "hsl(" + ~~(i * 360 / ing) + ", 100%," + Math.min(50, i * 500 / ing) + "%)";

ctx.fillStyle = s;

ctx.fillRect(x, y, pass[p][4], pass[p][5]);

//ctx.fillRect(x, y,1,1);

/*d[0] = ~~Math.min(255,i*500/ing);

ctx.putImageData( id, x, y ); */

}