Recursive square: Difference between revisions
No edit summary |
|||
| Line 14: | Line 14: | ||
ctx.strokeRect(0, 0, l, l); | ctx.strokeRect(0, 0, l, l); | ||
if (l > 10) { | if (l > 10) { | ||
square(l- | square(l-20); | ||
} | } | ||
} | } | ||
Revision as of 12:24, 1 October 2012
Het "Droste" Effect
Drawing hands
Recursive Square
<canvas id="c1" showsrc> function square (l) {
ctx.strokeRect(0, 0, l, l);
if (l > 10) {
square(l-20);
}
}
var c, ctx; function draw() {
c = document.getElementById("c1");
ctx = c.getContext("2d");
square(250);
} </canvas>
Recursive Square
<canvas id="c2" showsrc> function square (x, y, l) {
ctx.strokeRect(x, y, l, l);
if (l > 10) {
var q = l/2;
square(x, y, q);
square(x, y+q, q);
square(x+q, y, q);
square(x+q, y+q, q);
}
}
var c, ctx; function draw() {
c = document.getElementById("c2");
ctx = c.getContext("2d");
square(0, 0, 250);
} </canvas>