HTML and CSS Reference
In-Depth Information
Kit Experiment) that you can download at
http://code.google.com/p/
cakejs/
. Using the CAKE library you can easily create CANVAS-based
animation. The following code will create a pulsing blue circle.
window.onload = function()
{
var CAKECanvas = new Canvas(document.body,
600, 400);
var myCircle = new Circle(100,
{
id: 'myCircle',
x: CAKECanvas.width / 3,
y: CAKECanvas.height / 2,
stroke: 'blue',
strokeWidth: 20,
endAngle: Math.PI*2
}
);
myCircle.addFrameListener(
function(t, dt)
{
this.scale = Math.sin(t / 1000);
}
);
CAKECanvas.append(myCircle);
};
The final step you need to take to ensure that your anima-
tion works is to download the CAKE library files to your Web site.
The files can be downloaded at
http://glimr.rubyforge.org/cake/
.
You will need to save the CAKE JS library to your Web site. In the
HEAD section of your Web page you will need to make a linked
reference to the CAKE library. It will look like this:
<script type=“text/javascript” src=“cake.js”>
</script>
To accomplish the animation use the Scale method. The effect
is very similar to Adobe's Flash, but with the benefit of running
correctly on web browsers found on mobile devices such as the
iPhone, MyTouch, and Palm Pre.
The introduction of CANVAS and SVG gives you great oppor-
tunities to create complex and compelling illustrations program-
matically inside of your HTML5 web pages. It is fair to say that
CANVAS is still growing in technical scope. Expect additions and
changes to the technology over the next few years. A big addition
will be the inclusion of 3D within CANVAS.
