HTML5 Guidelines for Web Developers
This page intentionally left blank ...
5 Canvas One of the most interesting and at the same time one of the oldest new HTML5 elements is Canvas. In July 2004, just one ...
108 Chapter 5—Canvas You can find Apple’s Canvas announcement and Ian Hickson’s reaction at: z http://weblogs.mozillazine.org/hy ...
5.1 A First Example 109 Figure 5.1 Two overlapping rectangles All figures in this chapter were created as HTML pages using Canva ...
110 Chapter 5—Canvas Now we have defined the drawing context and can start drawing the two rect- angles. Without going into deta ...
5.2 Rectangles 111 5.2 Rectangles Canvas has four methods for creating rectangles. Three of these we will discuss now, the fourt ...
112 Chapter 5—Canvas <script> var canvas = document.querySelector("canvas"); var context = canvas.getContext('2d'); var dr ...
5.3 Colors and Shadows 113 5.3 Colors and Shadows The attributes fillStyle and strokeStyle serve to specify colors for fills and ...
114 Chapter 5—Canvas You can find more information on the topic CSS colors with HSL color palettes and a list of all valid SVG c ...
5.4 Gradients 115 Figure 5.4 Linear gradient with four colors First, context.createLinearGradient(x0, y0, x1, y1) creates a Canv ...
116 Chapter 5—Canvas linGrad.addColorStop(0.7, 'orange'); linGrad.addColorStop(1.0, 'purple'); Colors are specified following th ...
5.5 Paths 117 var radGrad = context.createRadialGradient( 260,320,40,200,400,200 ); radGrad.addColorStop(0.0,'yellow'); radGrad. ...
118 Chapter 5—Canvas Figure 5.6 The letter A as a path Let’s look closer at the source code for this example. We can see the thr ...
5.5 Paths 119 5.5.1 Lines To create lines as in our example of the letter A, Canvas offers the method lineTo(): context.lineTo(x ...
120 Chapter 5—Canvas 5.5.2 Bézier Curves Canvas knows two kinds of Bézier curves: quadratic and cubic, the latter incor- rectly ...
5.5 Paths 121 Figure 5.9 The path method “bezierCurveTo()” To create Bézier curves, we need the current point as a starting coor ...
122 Chapter 5—Canvas Figure 5.10 The path method “arcTo()” In practice, this method is very useful for rectangles with rounded c ...
5.5 Paths 123 Figure 5.11 Four different rectangles with rounded corners; the circle is an extreme example of a rounded rectangl ...
124 Chapter 5—Canvas The second option for creating arcs—the method arc()—seems even more com- plicated at first glance. In addi ...
5.5 Paths 125 var deg2rad = function(deg) { return deg*(Math.PI/180.0); }; Talking of helper functions, let’s use two more to fa ...
«
2
3
4
5
6
7
8
9
10
11
»
Free download pdf