Графика тегом <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});

}

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