THE LATEST BROWSERS ARE ALREADY IMPLEMENTING SOME OF THE UPCOMING HTML 5 SPECIFICATIONS, SO IT’S A GOOD TIME TO START EXPERIMENTING WITH WHAT THE NEXT WEB WILL BRING
HTML 5 IS still working its way through the standards process, but some of its features are already in your browsers. If you’re using the latest Opera, Firefox or Internet Explorer, you’ve already downloaded a browser that can handle one or two pieces of the next generation of the web. With the standard still months or even years away, it’s not surprising that each browser offers a different set of HTML 5 components. Some just offer new JavaScript APIs, while others are starting to include intriguing new tags, like the <canvas> drawing surface. It’s worth getting to grips with these new features, as they’re going to be important web design tools in the future – but remember that they’re not end-user ready. As the specification
gets finalised, what’s in your browser is likely to change. The skills you’ll pick up now, however, will be ready for the final HTML 5, whenever it arrives.
Author: Simon Bisson | Originally appeared in Issue 149
01 Drawing with <canvas>
HTML 5’s <canvas> tag lets you draw complex 2D images using simple JavaScript commands. You can start with basic shapes, and can quickly combine these to make more complex illustrations that can be animated. Remember to add content that can be displayed by browsers that can’t use <canvas> inside the <canvas></canvas> tags.
<html>
<head>
<title>HTML 5 demo</title>
<script type=”text/javascript”>
function drawCanvas()
{
var canvas = document.getElementById(‘testCanvas’);
var ctx = canvas.getContext(‘2d’);
ctx.fillStyle=’#FF2200’;
ctx.fillRect(10,10,100,100);
}
</script>
</head>
<body>
<body onload = “drawCanvas();”>
<canvas id = “testCanvas” width =
“300” height = “300”>Your browser does not support the
canvas tag.</canvas>
</body>
</html>
02 Drawing a square
That created an area to draw objects. We’re starting with a coloured square, which we’re drawing using the fillRect JavaScript method. We can use fillStyle to set the colour of the object. HTML 5 supports other primitive image shapes,
which we can combine to make more complex objects.
03 Adding a circle
Drawing circles is harder than squares or rectangles. Here, we have to use an arc function to draw and fill a circle. One problem is that HTML 5’s drawing API expects angles to be expressed in radians, so we’ll need to convert our 360
degrees of arc using JavaScript’s built-in mathematical functions. Add this code to the canvas JavaScript block:
ctx.beginPath();
var x = 120
var y = 120;
var radius = 50;
var startAngle = 0;
var endAngle = (Math.PI / 180)* 360;
var anticlockwise = true
ctx.arc(x,y,radius, startAngle, endAngle, anticlockwise);
ctx.fill();
04 Blending colours
HTML 5’s drawing APIs let you use an alpha blend to mix colours. You can do this by choosing an appropriate fill style. Here, we’re using an RGB colour mix, and all we need to do to specify alpha blending is to specify ‘rgba’ instead of ‘rgb’. The transparency level is a number between zero and one.
ctx.fillStyle = “rgba(0, 0, 200, 0.5)”;
05 Paths to pictures
The secret to drawing shapes in HTML 5 is using paths. We’ve already used a startPath function to draw our circle, and we can change the shape we’re drawing by using 270 degrees. Add a closePath function after you draw your arc (and switch to draw clockwise) to get this image.
06 Stroke versus Fill
Paths can be treated as strokes – for line drawing – or fills. Strokes are simple lines that follow the path described by a set of drawing instructions. You can move between points without drawing a line using a moveTo() function, allowing
complex shapes to be drawn with one single stroke() function. This code adds two concentric triangles to our drawing in just one action.
ctx.beginPath();
ctx.moveTo(35,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.lineTo(35,50);
ctx.moveTo(45,50);
ctx.lineTo(90,65);
ctx.lineTo(90,35);
ctx.closePath();
ctx.stroke();
07 Colouring strokes
We’ve already used fillStyle to set colours and apply alpha blending to the shapes in our canvas drawing. We can do similar things with our line drawings, using strokeStyle to set colours for the canvas stroke-drawing operation. Set strokeStyle to rgb(0, 300, 0) to draw your triangles in green.
08 Gradients
We’ve already used a local transparency value, but you can do a lot more with colours using the HTML 5 canvas API. One option is to use a colour gradient, where you can set the shape and direction of a gradient, either using a linear
or radial gradient. The result can be a very simple drawing but have a very effective effect – perhaps a stylised sunset or a forest fading off into the horizon.
var radialgradient = ctx.
createRadialGradient(75,75,0,75,75,100);
radialgradient.addColorStop(0,’rgb(200,0,0)’);
radialgradient.addColorStop(1,’rgb(0,0,200)’);
ctx.fillStyle=radialgradient;
09 Go further with <canvas>
JavaScript drawing commands can be used to produce simple animations, and can even interact with the mouse or the keyboard – letting you replace Flash with animations that are built into the page HTML rather than loaded into a plug-in player.
10 Web Forms 2.0
HTML 4’s forms are a familiar, if limited, way of getting info from a web browser to a server. HTML 5 builds on the old forms standard to deliver a more flexible way of working. Opera is the first browser to implement Web Forms 2.0, taking advantage of features like validity checking.
11 Validity checking
Adding a validity checker to a Web Forms 2.0 form doesn’t require any JavaScript. All you need to do is set the input type, with type options including URLs and email addresses. Set the form to be ‘required’ and the browser will alert the user if there is an error. You can add your own error message by hooking an alert to the field’s oninvalid event.
<form>
<label>Home page: <input type=”url”
name=”webaddress” required=”required”
oninvalid=”alert(‘You must enter a valid web page
address.’); return false;”>
</label>
</form>
12 Minimum and maximum
Web Forms 2.0’s validity-checking features aren’t just for checking whether your users have typed in an email address when asked for one. You can also use them to handle minimum and maximum values for a field, which can even be a date range. Opera will render this code as a field with up and down arrows that can be used to select a time inside the range specified.
<label>Select a time during business hours:<input type=”time” min=”09:00” max=”17:30”></label>
13 Stepping
One-minute intervals are a bit on the short side for a
booking system, so we’ll need to modify the default. Web
Forms 2.0 includes a step operator, which we can use to
control how Opera’s up/down control works. While the
Opera controls use a one-minute default, the minimum
step for a time input is one second. Set step to 1,800
seconds to allow users to pick appointments with 30-
minute intervals.
<label>Select a time during business hours:<input
type=”time” min=”09:00” max=”17:30” step=1800>
</label>
14 Complete with datalists
Modern browsers (and the Google toolbar) often store commonly used form responses. With Web Forms 2.0, sites can keep their own lists of responses, using datalists associated with form inputs. This code snippet will hold
a list of site URLs that can be used as a quick-pick list for a URL input field, or your user can type in a URL that isn’t on the list.
<input type=”url” name=”location” list=”urls”>
<datalist id=”urls”>
<option label=”Site 1” value=”http://www.site1.org/”>
<option label=”Site 2” value=”http://www.site2.org/”>
<option label=”Site 3” value=”http://www.site3.org/”>
<option label=”Site 4” value=”http://www.site4.org/”>
<option label=”Site 5” value=”http://www.site5.org/”>
<option label=”Site 6” value=”http://www.site6.org/”>
<option label=”Site 7” value=”http://www.site7.org/”>
</datalist>
Comments
Post a Comment
Comments: