javascript绘制谢尔宾斯基三角形(Sierpinski triangle)
canvas{border:2px solid #000; background:#fff;}
</style>
<body onload=“draw()”>
<input type=“text” value=“1” id=“txtDepth”/>
<input type=“button” value=“绘制” onclick=“draw()”/>
<input type=“checkbox” id=“cbox”>彩色
<br />
<canvas id=“cantest” width=“500px” height=“500px”></canvas>
</body>
主要代码：function draw(){
var can = document.getElementById(“cantest”);
if(can.getContext){
can.height = can.height;
var ctx = can.getContext(“2d”);
ctx.strokeStyle = “#000”;
var depth = parseInt(document.getElementById(“txtDepth”).value); //绘制维度
Sierpinski(ctx, 250.00, 20.00, 0.00, 500 * Math.sin(Math.PI / 3) + 20, 500.00, 500 * Math.sin(Math.PI / 3) + 20, depth , 0);
}else{
alert(“不支持Canvas”);
}
}
nowDepth = nowDepth + 1;
if(depth == 0){
return false;
}
if(depth == nowDepth){
ctx.beginPath();
if(document.getElementById(“cbox”).checked){
ctx.fillStyle = getColor();
}else{
ctx.fillStyle = “#000”;
}
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.fill(); //填充块
return false;
}
var x4 = x2 + (x3 – x2) / 2;
var x5 = x2 + (x3 – x2) / 4;
var x6 = x2 + (x3 – x2) * 3 / 4;
var y4 = 0.00;
var y5 = 0.00;
var y6 = 0.00;
y4 = y1 + (x3 – x2) * Math.sin(Math.PI / 3);
y5 = y1 + (x3 – x2) / 2 * Math.sin(Math.PI / 3);
y6 = y1 + (x3 – x2) / 2 * Math.sin(Math.PI / 3);
Sierpinski(ctx, x1, y1, x5, y5, x6, y6, depth, nowDepth);
Sierpinski(ctx, x5, y5, x2, y2, x4, y4, depth, nowDepth);
Sierpinski(ctx, x6, y6, x4, y4, x3, y3, depth, nowDepth);
}
function getColor(){
return \’#\’+(Math.random()*0xffffff<<0).toString(16);
}
</script>
运行后效果如下： 
图3 黑白 
图4 彩色 这次其实用画线的方法也是可以得，只是上次用过了，下次看到好玩的分形，继续玩一玩，canvas标签功能着实强大，应该好好发掘。