Canvas example with Cake
From Devipedia
(Difference between revisions)
WikiSysop (Talk | contribs)
(New page: 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...)
Newer edit →
(New page: 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...)
Newer edit →
Revision as of 14:13, 16 March 2010
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.
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); }