補充
作者第二種畫法的完整程序：
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>