HTML5 — 通过坐标系变换实现绘制科赫雪花
<!DOCTYPE html><html lang="en" xmlns="http://www.
<head>
<meta charset="utf-8" />
<title>通过坐标系变换实现绘制科赫雪花</title>
</head>
<body>
<canvas id="myCanvas" height="160" width="800"></canvas>
<script>
//定义2d绘图对象，定义角度制到弧度制的转换
var c = document.getElementById('myCanvas').getContext('2d'),
deg = Math.PI / 180;
//在画布的上下文c中，以左下角的点(x,y)和边长len，绘制一个n级别的科赫雪花分形
function snowflake(c, n, x, y, len) {
//保存当前变换
c.save();
//变换原点为起始点
c.translate(x, y);
//从新的原点开始一条新的子路径
c.moveTo(0, 0);
//绘制雪花的第一条边
leg(n);
//现在沿着逆时针方向旋转120°
c.rotate(-120 * deg);
//绘制第二条边
leg(n);
//再次旋转
c.rotate(-120 * deg);
//绘制最后一条边
leg(n);
//闭合子路径
c.closePath();
//恢复初始的变换
c.restore();
//绘制n级别的科赫雪花的一条边
//此函数在画完一条边的时候就会离开当前点
//然后通过坐标系变换将当前点又转换成(0,0)
//这意味着画完一条边之后可以简单地调用rotate()进行旋转
function leg(n) {
//保存当前坐标系变换
c.save();
if (n == 0) {
//不需要递归的情况下，就绘制一条水平线段
c.lineTo(len, 0);
}
else {
//递归情况下，绘制4条子边类似“M”的尖角
//子边长度为原始边长的三分之一
c.scale(1 / 3, 1 / 3);
//递归第一条子边
leg(n - 1);
//顺时针旋转60°
c.rotate(60 * deg);
//第二条子边
leg(n - 1);
//逆时针旋转120°
c.rotate(-120 * deg);
//第三条子边
leg(n - 1);
//通过旋转回到初始状态
c.rotate(60 * deg);
//最后一条边
leg(n - 1);
}
//恢复坐标系变换
c.restore();
//但是通过转换使得边的结束点为(0,0)
c.translate(len, 0);
}
}
//0级别的雪花就是一个三角形，1级别的雪花就是一个六角形，以此类推
snowflake(c, 0, 5, 115, 125);
snowflake(c, 1, 145, 115, 125);
snowflake(c, 2, 285, 115, 125);
snowflake(c, 3, 425, 115, 125);
snowflake(c, 5, 565, 115, 125);
//勾勒当前复杂的路径
c.stroke();
</script>
</body>
</html>
