制作有趣的网页
canvas中绘制Koch曲线
Koch曲线，也称科赫曲线，也是一种典型的分形曲线，不过其画法相对前面几种略微复杂一些。
这种图形，看起来似乎毫无头绪，其实细致分析起来，并不复杂。看其迭代一次、两次、三次的图形就能看出规律性。
最初的图形，就是提供两个顶点，然后把这两点之间连线；第一次迭代，是把这两点组成的线段三等分，获得其中的两个三等分点a和c，然后根据这两点计算中间的突起点b，这个点b与前面两个点a、c组成等边三角形，最后把这样的每两个点之间连线。再次迭代，则是把其中的每两个顶点都三等分，得到等分点a和c，然后计算出成等边三角形的b点，如此进行下去，就形成科赫曲线。不过，科赫曲线是迭代到最深一层才连接每两个端点，中间过程则不画线。因此绘画函数为：
把上述代码也是放入一个html网页框架中，最终代码为：
如果使用三段科赫曲线，还可以组成一个科赫雪花形状。这是使用三个科赫曲线组成，只要适当选择其中的坐标点，就可以首尾相接组合起来，感兴趣的可以试验一下。
这种图形，看起来似乎毫无头绪，其实细致分析起来，并不复杂。看其迭代一次、两次、三次的图形就能看出规律性。
最初的图形，就是提供两个顶点，然后把这两点之间连线；第一次迭代，是把这两点组成的线段三等分，获得其中的两个三等分点a和c，然后根据这两点计算中间的突起点b，这个点b与前面两个点a、c组成等边三角形，最后把这样的每两个点之间连线。再次迭代，则是把其中的每两个顶点都三等分，得到等分点a和c，然后计算出成等边三角形的b点，如此进行下去，就形成科赫曲线。不过，科赫曲线是迭代到最深一层才连接每两个端点，中间过程则不画线。因此绘画函数为：
function drawKoch(n,context,x1,y1,x2,y2){
if(n==0) {
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2, y2);
context.stroke();
return;
}
var xa=x1+(x2-x1)/3,
ya=y1+(y2-y1)/3,
xc=x2-(x2-x1)/3,
yc=y2-(y2-y1)/3,
l=Math.sqrt((xc-xa)*(xc-xa)+(yc-ya)*(yc-ya)),
alfa=Math.atan((yc-ya)/(xc-xa));
if((alfa>=0&&(xc-xa)<0)||(alfa<0&&(xc-xa)<0)) alfa+=Math.PI;
var xb=xa+Math.cos(alfa+Math.PI/3)*l,
yb=ya+Math.sin(alfa+Math.PI/3)*l;
drawKoch(n-1,context,x1,y1,xa,ya);
drawKoch(n-1,context,xc,yc,x2,y2);
drawKoch(n-1,context,xa,ya,xb,yb);
drawKoch(n-1,context,xb,yb,xc,yc);
}
在迭代函数中，最复杂的是计算突起点b的坐标，根据公式计算后，还需要根据值进行判断修正，以免出现顶点突起方向的错误，因为可能会出现180度的翻转。把上述代码也是放入一个html网页框架中，最终代码为：
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="gb18030" />
<title>分形</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"> 你使用的浏览器不支持需要的功能，请升级或更换！</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
width=canvas.width,
height=canvas.height;
window.onload=function() {
ctx.lineWidth=1;
ctx.strokeStyle='#66aaff';
drawKoch(3,ctx,100,100,width-100,100);
};
function drawKoch(n,context,x1,y1,x2,y2){
if(n==0) {
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2, y2);
context.stroke();
return;
}
var xa=x1+(x2-x1)/3,
ya=y1+(y2-y1)/3,
xc=x2-(x2-x1)/3,
yc=y2-(y2-y1)/3,
l=Math.sqrt((xc-xa)*(xc-xa)+(yc-ya)*(yc-ya)),
alfa=Math.atan((yc-ya)/(xc-xa));
if((alfa>=0&&(xc-xa)<0)||(alfa<0&&(xc-xa)<0)) alfa+=Math.PI;
var xb=xa+Math.cos(alfa+Math.PI/3)*l,
yb=ya+Math.sin(alfa+Math.PI/3)*l;
drawKoch(n-1,context,x1,y1,xa,ya);
drawKoch(n-1,context,xc,yc,x2,y2);
drawKoch(n-1,context,xa,ya,xb,yb);
drawKoch(n-1,context,xb,yb,xc,yc);
}
</script>
</body>
</html>
然后存储为html文件格式，就可以直接打开此文件显示科赫曲线的图形。如果使用三段科赫曲线，还可以组成一个科赫雪花形状。这是使用三个科赫曲线组成，只要适当选择其中的坐标点，就可以首尾相接组合起来，感兴趣的可以试验一下。