<!DOCTYPE html>
<html>
<head>
<title>科赫雪花</title>
</head>
<body>
<canvas id="snow"></canvas>
<script type="text/javascript">
(function(){
var canvas = document.getElementById("snow");
canvas.width = 750;
canvas.height = 200;
var c = canvas.getContext("2d");
var deg = Math.PI/180;
c.beginPath();
function snowFlake(c, n, x, y, len){
c.save();
c.translate(x,y);
c.moveTo(0,0);
leg(n);
c.rotate(-120*deg);
leg(n);
c.rotate(-120*deg);
leg(n);
c.closePath();
c.restore();
function leg(n){
c.save();
if(n === 0){
c.lineTo(len, 0);
}else{
c.scale(1/3,1/3);
leg(n-1);
c.rotate(60*deg);
leg(n-1);
c.rotate(-120*deg);
leg(n-1);
c.rotate(60*deg);
leg(n-1);
}
c.restore();
c.translate(len, 0);
}
}
snowFlake(c, 0, 5, 115, 125); // 0级雪花是三角形
snowFlake(c, 1, 145, 115, 125); //1级雪花是六角形
snowFlake(c, 2, 285, 115, 125);
snowFlake(c, 3, 425, 115, 125);
snowFlake(c, 4, 565, 115, 125); //4级雪花看起来就像一朵真雪花了
c.stroke();
})();
</script>
</body>
</html>
效果图：
科赫雪花
网友评论