console
function koch(ctx, x1, y1, x2, y2, n, m) {
if (m == 0) {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
return false;
}
var x3 = (x2 - x1) / 3 + x1;
var y3 = (y2 - y1) / 3 + y1;
var x4 = (x2 - x1) / 3 * 2 + x1;
var y4 = (y2 - y1) / 3 * 2 + y1;
var x5 = x3 + ((x2 - x1) - (y2 - y1) * Math.sqrt(3)) / 6;
var y5 = y3 + ((x2 - x1) * Math.sqrt(3) + (y2 - y1)) / 6;
n = n + 1;
if (n == m) {
ctx.moveTo(x1, y1);
ctx.lineTo(x3, y3);
ctx.lineTo(x5, y5);
ctx.lineTo(x4, y4);
ctx.lineTo(x2, y2);
ctx.stroke();
return false;
}
koch(ctx, x1, y1, x3, y3, n, m)
koch(ctx, x3, y3, x5, y5, n, m)
koch(ctx, x5, y5, x4, y4, n, m)
koch(ctx, x4, y4, x2, y2, n, m)
}
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
canvas.height = canvas.height;
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#00";
ctx.beginPath();
var x1 = 400.00;
var y1 = 150.00;
var x2 = 100.00;
var y2 = 150.00;
var x11 = x2 + (x1 - x2) / 2;
var y11 = y1 + Math.sin(Math.PI / 3) * (x1 - x2);
var depth =6;
koch(ctx, x1, y1, x2, y2, 0, depth);
koch(ctx, x11, y11, x1, y1, 0, depth);
koch(ctx, x2, y2, x11, y11, 0, depth);
} else {
alert("不支持Canvas");
}
}
draw();
<canvas id="canvas" width=600 height=600 style="background:red"></canvas>