Canvas API, Web Applications 1.0

Created at 2008-05-28 02:01:09 | 0  Comments ↓ |     Digg   Stumble It!    Del.icio.us   

The second specification that is pushing forward JavaScript development is that of the WHAT-WG (Web Hypertext Application Technology Working Group) in creating the new Web Applications 1.0 specification. This specification goes in a number of different directions, adding numerous additions to HTML, the DOM, and JavaScript as a whole. Many consider the work going into this specification is what will become HTML 5. Thankfully, unlike new versions of JavaScript, implementations of (portions of) this specification are much easier to come by.

While this entire specification is quite large, I highly recommend that you read through it and look at the new technology that will be available very soon. In this section I'll only be focusing on one particular feature of this new specification: the <canvas> element. This new element allows you to programmatically draw 2D images using JavaScript. Adoption of this technique has been very high, making it an easy topic to learn and test.

The <canvas> element fills the needs of many web application developers, allowing them to rotate images, draw lines, and create shapes. This single addition can add on whole new levels of interactivity to web applications.

The usefulness of being able to draw arbitrary shapes has encouraged browser maintainers to rapidly include the Canvas API in their latest browser releases. Currently, every modern browser supports the Canvas API, with the exception of Internet Explorer, and Google has stepped up and implemented the entire Canvas API in IE, using its native VML support. More information about ExplorerCanvas, Google's Internet Explorer Canvas implementation, is at http://code.google.com/p/explorercanvas/.

Next, we're going to take an in-depth look at two of the examples presented in Mozilla's basic <canvas> tutorial.

Building a Clock

The first example is the building of a simple clock. You're going to use the Canvas 2D API to draw every aspect of the clock; no images or extraneous HTML elements will be used in this process.

The <canvas> element works something like a real painting canvas. You can draw a single static frame of the animated clock; but in order to draw a new frame, you must completely clear your canvas and draw it anew. If you have experience with the OpenGL API, you'll feel right at home with the Canvas API.

With the Canvas API, you frequently need to rotate the image canvas—but this can cause a lot of confusion, as you may not know what angle you're currently pointing at or where your "brush" is currently located. It's for that reason that the Canvas API works a lot like a stack: you first save the old position and rotation of the canvas, make some changes to how the current image looks, then revert back to the original canvas and continue drawing.

	/ Wait for the browser to load
window.onload = function() {
	/ Draw the clock
	clock();
	/ and re-draw the clock every second thereafter
	setInterval(clock, 1000);
};
function clock() {
/ Get the current date and time
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr = hr >= 12 ? hr - 12 : hr;
/ Get the drawing context of the  element
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
/ Initalize the drawing Canvas
ctx.clearRect(0,0,150,150);
/ When we draw at 0,0 we're actually drawing at 75,75
ctx.translate(75,75);
/ Drawing a 100px line actually draws a 40px line
ctx.scale(0.4,0.4);
CHAPTER 14 n WHERE IS JAVASCRIPT GOING? 295
/ Start the cursor rotated at 12:00
ctx.rotate(-Math.PI/2);
/ Initalize the drawing properties
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.lineWidth = 8;
ctx.lineCap = "round";
/ Hour marks
ctx.save();
ctx.beginPath();
/ For each hour
for ( var i = 0; i < 12; i++ ) {
/ Rotate the Canvas 1/12th of the way
/ (remember: A circle = 2 * PI)
ctx.rotate(Math.PI/6);
/ Move the cursor to near the outside of the Canvas
ctx.moveTo(100,0);
/ and draw a short (20px) tick
ctx.lineTo(120,0);
}
ctx.stroke();
ctx.restore();
/ Minute marks
ctx.save();
/ These ticks will be lighter than the hours
ctx.lineWidth = 5;
ctx.beginPath();
/ For each minute
for ( var i = 0; i < 60; i++ ) {
/ except for the minutes that are 'on the hour'
if ( i % 5 != 0 ) {
/ Move the cursor farther out
ctx.moveTo(117,0);
/ And draw a short (3px) line
ctx.lineTo(120,0);
}
296 CHAPTER 14 n WHERE IS JAVASCRIPT GOING?
/ Rotate the Canvas 1/60th of the way around
ctx.rotate(Math.PI/30);
}
ctx.stroke();
ctx.restore();
/ Draw Hour Hand
ctx.save();
/ Rotate the Canvas to the correct position
ctx.rotate( (Math.PI/6) * hr + (Math.PI/360) * min + (Math.PI/21600) * sec )
/ This line is going to be wide
ctx.lineWidth = 14;
ctx.beginPath();
/ Start drawing from just off-center (making it look like a clock hand)
ctx.moveTo(-20,0);
/ And draw to near the hour ticks
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
/ Draw Minute Hand
ctx.save();
/ Rotate the Canvas to the current minute position
ctx.rotate( (Math.PI/30) * min + (Math.PI/1800) * sec )
/ This line will be thinner than the hour hand
ctx.lineWidth = 10;
ctx.beginPath();
/ But it's also longer, so set it farther back
ctx.moveTo(-28,0);
/ And draw it farther out
ctx.lineTo(112,0);
ctx.stroke();
ctx.restore();
/ Draw Second Hand
ctx.save();
/ Rotate the Canvas to the current second position
ctx.rotate(sec * Math.PI/30);
CHAPTER 14 n WHERE IS JAVASCRIPT GOING? 297
/ This line will be redish
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
/ and thinner than the other hands
ctx.lineWidth = 6;
ctx.beginPath();
/ But also set farther back
ctx.moveTo(-30,0);
/ But stubbier
ctx.lineTo(83,0);
ctx.stroke();
ctx.restore();
/ Outside Blue Circle
ctx.save();
/ The border will be wide
ctx.lineWidth = 14;
/ and blue-ish
ctx.strokeStyle = '#325FA2';
ctx.beginPath();
/ Draw a complete circle, 142px out
ctx.arc(0,0,142,0,Math.PI*2,true);
ctx.stroke();
ctx.restore();
ctx.restore();
}

0 Comments

No comments yet, be the first to comment!

Name: Email: Website: Comment: