转载《小练手：用Canvas绘制谢尔宾斯基三角形》
补充
作者第二种画法的完整程序：
PS：修改function SierpinskiTriangle(p,len,depth = 9)中depth的赋值0~9，观察效果。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Sierpinski Triangle</title></head><body><canvas id="canvas" width="600" height="600" style="display:block;margin:50px auto">你的浏览器不支持canvas</canvas></body><script type="text/javascript">var context = document.getElementById("canvas").getContext("2d");//根据三顶点坐标绘制一个三角形function triangle(p1,p2,p3){context.moveTo(p1.x,p1.y);context.lineTo(p2.x,p2.y);context.lineTo(p3.x,p3.y);context.lineTo(p1.x,p1.y);}/*绘制谢尔宾斯基三角形的方法p：正三角形中心点坐标，len：三角形边长，depth：递归深度*/function SierpinskiTriangle(p,len,depth = 9){var r=len/Math.sqrt(3);//记录当前端点，默认为左下角顶点坐标var currentPoint={x:p.x-len/2, y:p.y+r/2};//记录当前方向角var currentAngle=0;//旋转方法，将下次画线的方向逆时针旋转function turn(angle){currentAngle+=angle;}//画线方法，根据当前端点和画线方向绘制function draw_line(length){var angle=currentAngle/180*Math.PI;currentPoint.x+=length*Math.cos(angle);currentPoint.y-=length*Math.sin(angle);context.lineTo(currentPoint.x,currentPoint.y);}//开始画折线，如果深度是偶数便可直接绘制折线，否则需要以斜60度为初始方向context.moveTo(currentPoint.x,currentPoint.y);if (depth%2==0){curve(depth,len,-60);}else{turn(60);curve(depth,len,-60);}function curve(order,length,angle){if (order==0){draw_line(length);}else{//递归画三段折线curve(order-1,length/2,-angle);turn(angle);curve(order-1,length/2,angle);turn(angle);curve(order-1,length/2,-angle);}}}//绘制SierpinskiTriangle({x:300,y:360},560);context.lineWidth = 0.5;context.strokeStyle = "#F5270B";context.stroke();</script></html>
