提供繪製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>