Canvas example with Cake
From Devin's WIKI
This is a example of using the canvas element using the Cake javascript library. I took a basic example I found on the web and modified it to provide the animation you see on my home page. If you followed a linked called 'view source' but did not see an animation, you are likely using an IE browser.
function draw() {
var c = document.getElementById("canvas");
var CAKECanvas = new Canvas(c, 275, 60);
var offset = 1;
for (x=0;x<5;x++) {
var circle1 = new Circle(x*40, {
id: 'myCircle1',
x: CAKECanvas.width / 2,
y: CAKECanvas.height / 2,
stroke: 'black',
strokeWidth: 20,
endAngle: Math.PI*4
}
);
circle1.addFrameListener(
function(t, dt)
{
offset += 2;
if (offset > 3100) offset = 1;
this.scale = Math.sin(offset / 1000);
}
);
CAKECanvas.append(circle1);
}
var hello = new ElementNode(E('h2', 'HTML Canvas'),
{
fontFamily: 'Arial, Sans-serif',
noScaling: true,
color: 'white',
x: CAKECanvas.width / 2,
y: CAKECanvas.height / 2,
align: 'center',
valign: 'center'
}
);
CAKECanvas.append(hello);
}
