谢尔宾斯基三角形（Sierpinski triangle）是一种分形，由波兰数学家谢尔宾斯基在1915年提出。
我们来看一下这个谢尔宾斯基三角形的实现步骤：
1. 画一个三角形（通常为等边三角形）
2. 假设上面的顶点为a,左边的点为b,右边的为c
选出三条边的中间点，a-b,a-c,b-c,画三个三角形
a a-b a-c
a-b b b-c
a-c b-c c
3.对新画出的三个三角形按步骤二继续绘制（递归的过程），直到你认为绘制的三角形足够小。
把以上的步骤理解清楚以后，就很容易实现，递归的思想用递归来实现是最合适不过了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//谢尔宾斯基三角形
function sierpinski(ctx, a, b, c)
{
if (isFinished(a,b,c)) {
return;
}
drawTriangle(ctx, a,b,c)
sierpinski(ctx, a, middle(a,b), middle(a, c));
sierpinski(ctx, middle(a,b), b, middle(b, c));
sierpinski(ctx, middle(a,c), middle(b, c), c);
}
//定义一个点对象
function Point(x,y)
{
this.x = x;
this.y = y;
}
//画一个三角形
function drawTriangle(ctx,a,b,c)
{
drawLine(ctx, a, b);
drawLine(ctx, a, c);
drawLine(ctx, b, c);
}
//取中间点
function middle(a,b)
{
return new Point(Math.abs(a.x+b.x)/2, Math.abs(a.y+b.y)/2);
}
//画线
function drawLine(ctx,a,b)
{
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.stroke();
}
//判断是否停止绘制
function isFinished(a,b,c)
{
return Math.abs(b.x-c.x) < 5;
}
(function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "blue";
var a = new Point(200, 0);
var b = new Point(27, 300);
var c = new Point(373, 300);
sierpinski(ctx, a, b,c, 900);
})();
下面是用html5+javascript来实现的例子，需要Chrome 、 Firefox 、Safari,或ie9+浏览器查看,为查看中间步骤，加了一个时间延迟：