html5根据坐标系,HTML5 — 通过坐标系变换实现绘制科赫雪花

HTML5 — 通过坐标系变换实现绘制科赫雪花

通过坐标系变换实现绘制科赫雪花

//定义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();