Canvas example with Cake
From Devipedia
(Difference between revisions)
(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...) |
|||
Line 1: | Line 1: | ||
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. | 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. | ||
+ | <i>If you followed a linked called 'view source' but did not see an animation, you are likely using an IE browser.</i> | ||
+ | |||
<pre> | <pre> | ||
function draw() { | function draw() { |
Latest revision as of 15:20, 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. 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); }