JavaScript分形是一种令人着迷的领域。它基本上是代码编写的一种形式，通过递归算法完成一个自相似的图形。一个分形结构由许多相同的部分构成，所有部分加在一起就组成了分形整体。

让我们看一个最经典的分形例子：谢尔宾斯基三角形。这个分形结构由很多小的三角形组成，每个小三角形都是正三角形，边长是父级所在的正三角形的三分之一。可以通过简单的三行Javascript代码绘制这个结构：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var triangle = function(x, y, len) {
context.beginPath();
context.moveTo(x, y);
context.lineTo(x + len, y);
context.lineTo(x + len / 2, y + len * Math.sin(Math.PI / 3));
context.closePath();
context.stroke();
if (len >10) {
triangle(x, y, len / 2);
triangle(x + len / 2, y, len / 2);
triangle(x + len / 4, y + len * Math.sin(Math.PI / 3) / 2, len / 2);
}
}
triangle(0, 0, 300);

该代码使用递归算法完成谢尔宾斯基三角形绘制。初始三角形的边长是300像素，每次递归绘制三个较小的三角形。在每个小三角形的角落继续递归，直到边长小于某个阈值为止。

除了谢尔宾斯基三角形之外，JavaScript还可以用来绘制很多分形结构。例如，科赫曲线是另一个流行的分形结构，由一系列相同的线段组成。可以使用一些JavaScript代码生成这个分形，代码如下：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var koch = function(x1, y1, x2, y2, depth) {
if (depth === 0) {
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
} else {
var x3 = (2 * x1 + x2) / 3;
var y3 = (2 * y1 + y2) / 3;
var x4 = (2 * x2 + x1) / 3;
var y4 = (2 * y2 + y1) / 3;
var x5 = x3 + (x4 - x3) * Math.cos(Math.PI / 3) - (y4 - y3) * Math.sin(Math.PI / 3);
var y5 = y3 + (y4 - y3) * Math.cos(Math.PI / 3) + (x4 - x3) * Math.sin(Math.PI / 3);
koch(x1, y1, x3, y3, depth - 1);
koch(x3, y3, x5, y5, depth - 1);
koch(x5, y5, x4, y4, depth - 1);
koch(x4, y4, x2, y2, depth - 1);
}
};
koch(0, 150, canvas.width, 150, 5);

这段代码绘制了一个科赫曲线。与谢尔宾斯基三角形相似，每个线段都被分成三个相同长度的线段。然后，中间的线段被扩展为边长相同的正三角形。然后在这种正三角形的上方或下方连接另一个小线段。依此类推，然后整个结构将是一个自相似的、带有分形特性的图形。

在Javascript中使用分形的好处是可以非常轻松地在画布上绘制各种形状。分形结构非常自然，在JavaScript中使用分形可以帮助我们更好地探索复杂性，并帮助我们更好地了解到计算机编程的精妙之处。