html5+javascript画谢尔宾斯基三角形

谢尔宾斯基三角形(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

222

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+浏览器查看,为查看中间步骤,加了一个时间延迟: