繪製Koch曲線

        提供繪製Koch曲線的html5代碼一坨:

<html>
  <canvas id="blackboard" width="1600" height="1000">
  </canvas>
  <script>
    function draw()
    {
      var pi = 3.14159265;

      // 獲取畫布
      var canv = document.getElementById("blackboard");
      var context = canv.getContext("2d");

      var unit = 300;
      var delta = 200;

      var length = unit;

      var x0 = delta;
      var y0 = delta + Math.sqrt(3)*unit;

      var s = "slsrsls";
      var lengths = new Array();
      var len1 = 1/3* length*3;
      var len2 = 2/3* length*3;

      lengths[0] = len1;
      lengths[1] = len2 - len1;
      lengths[2] = len2 - len1;
      lengths[3] = length*3 - len2;
      var secs = 4;
      var head = 0;

      //計算每段的長度,迭代6次
      for(var i=0; i<6; i++)
      {
        head = 0;
        for(var j=head; j<secs; j+=4)
        {
          var secLen1 = 1/3* lengths[j];
          var secLen2 = 2/3* lengths[j];
         
          for(var k=secs-1; k>j; k--)
          {
            lengths[k+3] = lengths[k];
          }
          
          lengths[j + 1] = secLen2-secLen1;
          lengths[j + 2] = secLen2-secLen1;
          lengths[j + 3] = lengths[j]-secLen2;
          lengths[j] = secLen1;
          head += 4;
          secs += 3;
        }
        //拼出繪圖命令
        s = s.replace(/s/g, "slsrsls");
      }
  
      var angle = 0;
      var tx = x0;
      var ty = y0;
      context.moveTo(x0, y0);
      var lIndex = 0;
      for(var i=0; i<s.length; i++)
      {
        var char = s.substr(i, 1);
        if(char == "l")
        {
          angle += pi/3;
        }
        else if(char == "r")
        {
          angle -= pi*2/3;
        }
        else
        {
          //執行每一段的繪圖命令
          drawLine(context, tx, ty, lengths[lIndex], angle);
          tx = tx + lengths[lIndex]* Math.cos(angle);
          ty = ty - lengths[lIndex]* Math.sin(angle);
          lIndex ++;
        }
      }

      context.strokeStyle = "green";
      context.stroke();
    }

    function drawLine(context, x0, y0, length, angle)
    {
       var x1 = x0 + length * Math.cos(angle);
       var y1 = y0 - length * Math.sin(angle);
       context.lineTo(x1, y1);
    }

    window.addEventListener("load", draw, true);
  </script>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章