-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathhtml.html
45 lines (40 loc) · 1.13 KB
/
html.html
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
<html>
<head>
<script type="application/javascript">
var triangles = [];
var drawTriangle = function(x, y, w, h) {
this.beginPath();
this.lineTo(x - w, y + h);
this.lineTo(x + w, y + h);
this.lineTo(x, y);
this.fillStyle = "rgba(137, 245, 228, 0.3);";
this.fill();
this.closePath();
};
var serpinsky = function(x, y, w, h) {
var that = this;
triangles.push([that, x, y, w, h]);
if (w < 10 || h < 10)
return;
serpinsky.call(this, x, y, w / 2, h / 2);
serpinsky.call(this, x + w / 2, y + h / 2, w / 2, h / 2);
serpinsky.call(this, x - w / 2, y + h / 2, w / 2, h / 2);
};
var draw = function() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
serpinsky.call(ctx, 500, 0, 500, 500);
setTimeout(function() {
drawTriangle.call.apply(drawTriangle, triangles.shift());
if (triangles.length > 0)
setTimeout(arguments.callee, 10);
}, 100);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
</html>