Графика тегом <canvas>

[taras atavin]

window.onload = Start();

function Start()

{

DrawAll(4, 4, 24, 144);

}

function CalculateTree(x, y, radius, levels, level, number, step, skip, minx, maxx, maxy)

{

var r;

var leftx;

var rightx;

var bottomy;

if (number!=skip.val)

{

r=number;

leftx=x-radius-2;

rightx=x+radius+2;

bottomy=y+radius+2;

if (leftx<minx.val)

{

minx.val=leftx;

}

if (rightx>maxx.val)

{

maxx.val=rightx;

}

if (bottomy>maxy.val)

{

maxy.val=bottomy;

}

if (level<levels)

{

r=CalculateTree(x-step, y+step, radius, levels, level+1, r+1, step/3, skip, minx, maxx, maxy);

r=CalculateTree(x, y+step, radius, levels, level+1, r+1, step/3, skip, minx, maxx, maxy);

r=CalculateTree(x+step, y+step, radius, levels, level+1, r+1, step/3, skip, minx, maxx, maxy);

}

return r;

}

skip.val=0;

return number-1;

}

function DrawTree(x, y, radius, levels, level, number, step, skip)

{

var canvas = document.getElementById("Tree");

var context = canvas.getContext("2d");

var r;

var l;

l=radius*Math.cos(Math.PI/4);

if (number!=skip.val)

{

context.lineWidth=1;

context.strokeStyle = "black";

context.beginPath();

context.arc(x, y, radius, 0, 2*Math.PI, false);

context.closePath();

context.stroke();

r=number;

if (level<levels)

{

if ((r+1)!=skip.val)

{

context.lineWidth=1;

context.strokeStyle = "red";

context.beginPath();

context.moveTo(x-l, y+l);

context.lineTo(x-step+l, y+step-l);

context.closePath();

context.stroke();

}

r=DrawTree(x-step, y+step, radius, levels, level+1, r+1, step/3, skip);

if ((r+1)!=skip.val)

{

context.lineWidth=1;

context.strokeStyle = "red";

context.beginPath();

context.moveTo(x, y+radius);

context.lineTo(x, y+step-radius);

context.closePath();

context.stroke();

}

r=DrawTree(x, y+step, radius, levels, level+1, r+1, step/3, skip);

if ((r+1)!=skip.val)

{

context.lineWidth=1;

context.strokeStyle = "red";

context.beginPath();

context.moveTo(x+l, y+l);

context.lineTo(x+step-l, y+step-l);

context.closePath();

context.stroke();

}

r=DrawTree(x+step, y+step, radius, levels, level+1, r+1, step/3, skip);

}

return r;

}

skip.val=0;

return number-1;

}

function BrushTree(node, radius, levels, skip, flag)

{

var n;

var leftx={val:node.x};

var rightx={val:node.x};

var buttomy={val:node.y};

var canvas = document.getElementById("Tree");

var context = canvas.getContext("2d");

var dx;

var dy;

var l;

if (node.number!=skip.val)

{

n=CalculateTree(node.x, node.y, radius, levels, node.level, node.number, node.step, {val:skip.val}, leftx, rightx, buttomy);

}

else

{

n=CalculateTree(node.x, node.y, radius, levels, node.level, node.number, node.step, {val:0}, leftx, rightx, buttomy);

}

leftx.val+=radius;

leftx.val+=2;

rightx.val-=radius;

rightx.val-=2;

buttomy.val-=radius;

buttomy.val-=2;

if ((node.x==leftx.val)&(node.x==rightx.val)&(node.y==buttomy.val))

{

return false;

}

if (flag)

{

context.lineWidth=1;

context.strokeStyle = "lime";

context.beginPath();

context.arc(node.x, node.y, radius+1, 0, 2*Math.PI, false);

context.closePath();

context.stroke();

context.lineWidth=1;

context.strokeStyle = "lime";

context.beginPath();

context.arc(leftx.val, buttomy.val, radius+1, 0, 2*Math.PI, false);

context.closePath();

context.stroke();

context.lineWidth=1;

context.strokeStyle = "lime";

context.beginPath();

context.arc(rightx.val, buttomy.val, radius+1, 0, 2*Math.PI, false);

context.closePath();

context.stroke();

dx=buttomy.val-node.y;

dy=node.x-rightx.val;

l=Math.sqrt(dx*dx+dy*dy);

dx*=(radius+1)/l;

dy*=(radius+1)/l;

context.lineWidth=1;

context.strokeStyle = "lime";

context.beginPath();

context.moveTo(node.x+dx, node.y+dy);

context.lineTo(rightx.val+dx, buttomy.val+dy);

context.closePath();

context.stroke();

dx=node.y-buttomy.val;

dy=leftx.val-node.x;

l=Math.sqrt(dx*dx+dy*dy);

dx*=(radius+1)/l;

dy*=(radius+1)/l;

context.lineWidth=1;

context.strokeStyle = "lime";

context.beginPath();

context.moveTo(node.x+dx, node.y+dy);

context.lineTo(leftx.val+dx, buttomy.val+dy);

context.closePath();

context.stroke();

context.lineWidth=1;

context.strokeStyle = "lime";

context.beginPath();

context.moveTo(leftx.val, buttomy.val+radius+1);

context.lineTo(rightx.val, buttomy.val+radius+1);

context.closePath();

context.stroke();

}

return true;

}

function SearchNode(node, radius, levels, skip, find)

{

var first;

var second;

var third;

var r;

if (node.number==find)

{

return node.number;

}

if (node.level<levels)

{

if ((node.number+1)!=skip.val)

{

first={x:node.x-node.step, y:node.y+node.step, level:node.level+1, number:node.number+1, step: node.step/3};

r=SearchNode(first, radius, levels, skip, find);

if (first.number==find)

{

node.x=first.x;

node.y=first.y;

node.level=first.level;

node.number=first.number;

node.step=first.step;

return node.number;

}

}

else

{

skip.val=0;

return r;

}

second={x:node.x, y:node.y+node.step, level:node.level+1, number:r+1, step:node.step/3};

if ((r+1)!=skip.val)

{

r=SearchNode(second, radius, levels, skip, find);

if (second.number==find)

{

node.x=second.x;

node.y=second.y;

node.level=second.level;

node.number=second.number;

node.step=second.step;

return node.number;

}

}

else

{

skip.val=0;

return r;

}

if ((r+1)!=skip.val)

{

third={x:node.x+node.step, y:node.y+node.step, level:node.level+1, number:r+1, step:node.step/3};

r=SearchNode(third, radius, levels, skip, find);

if (third.number==find)

{

node.x=third.x;

node.y=third.y;

node.level=third.level;

node.number=third.number;

node.step=third.step;

return node.number;

}

}

else

{

skip.val=0;

return r;

}

return r;

}

else

{

return node.number;

}

}

function BrushTreeByNumber(tree, x0, radius, levels, skip, step)

{

var n;

var node;

var r=1;

var count;

var f;

for (r=1, count=0; count<tree; ++r)

{

node={x:x0, y:radius+2, level:1, number:1, step:step};

n=SearchNode(node, radius, levels, {val:skip}, r);

if (BrushTree(node, radius, levels, {val:skip},false))

{

++count;

}

}

f=BrushTree(node, radius, levels, {val:skip},true);

}

function DrawAll(radius, levels, skip, step)

{

var n;

var ForTree=document.getElementById("ForTree");

var x0;

var w;

var h;

var minx={val:0};

var maxx={val:0};

var maxy={val:0};

n=CalculateTree(0, radius+2, radius, levels, 1, 1, step, {val:skip}, minx, maxx, maxy);

w=maxx.val-minx.val+1;

x0=-minx.val;

h=maxy.val+1;

ForTree.innerHTML='<canvas id="Tree" width='+(w)+' height='+h+'>Для правильного отображения данной страницы пользуйтей стандарным web-браузером с поддержкой тега &lt;canvas></canvas>';

BrushTreeByNumber(1, x0, radius, levels, skip, step);

n=DrawTree(x0, radius+2, radius, levels, 1, 1, step, {val:skip});

}, в два приёма в порядке картинок во вложениях строится изображение. Как перед вторым этапом закрасить треугольник зелёным?