HTML5 Guidelines for Web Developers
126 Chapter 5—Canvas Figure 5.13 Circles and sectors 5.5.4 Rectangles The method rect() handles a bit like our helpers, unlike t ...
5.5 Paths 127 Figure 5.14 The path method “rect()” 5.5.5 Outlines, Fills, and Clipping Masks.................................... ...
128 Chapter 5—Canvas Figure 5.15 Attributes for determining line styles The lineWidth is specified in pixels; the default settin ...
5.5 Paths 129 This may sound simple but can get very complicated if paths self-intersect or are nested. In such cases, the so-ca ...
130 Chapter 5—Canvas circle(900,400,240,0); circle(900,400,120,1); context.fill(); context.stroke(); After stroke() and fill(), ...
5.6 Text 131 Table 5.2 The components of the CSS “font” property Property Values font-style *normal, italic, oblique font-varian ...
132 Chapter 5—Canvas Figure 5.17 Font formatting with the “font” attribute At the time of this writing, no browser supported @fo ...
5.6 Text 133 Figure 5.18 presents the horizontal anchor points for writing with textflow ltr (left to right) and rtl (right to l ...
134 Chapter 5—Canvas The first four textBaseline keywords, top, middle, alphabetic and bottom are self-explanatory. A hanging ba ...
5.7 Embedding Images 135 Figure 5.20 “fillText()”, “strokeText()”, and “measureText()” It is not currently possible to determine ...
136 Chapter 5—Canvas context.drawImage(image, dx, dy) context.drawImage(image, dx, dy, dw, dh) context.drawImage(image, sx, sy, ...
5.7 Embedding Images 137 Figure 5.22 The source image of all “drawImage()” examples In addition to pixel sizes, which we will en ...
138 Chapter 5—Canvas Figure 5.23 Taft Point in Yosemite National Park If we want to represent the whole image in the canvas, we ...
5.7 Embedding Images 139 Figure 5.24 Taft Point with El Capitan in Yosemite National Park In contrast to the two previous variat ...
140 Chapter 5—Canvas Figure 5.25 Yosemite National Park postcard The first drawImage() call returns again the top-left quarter o ...
5.8 Pixel Manipulation 141 Figure 5.26 Yosemite National Park postcard (alternative layout) This was a brief introduction to the ...
142 Chapter 5—Canvas context.fillStyle = 'navy'; context.fillRect(0,0,1,1); context.fillStyle = 'teal'; context.fillRect(1,0,1,1 ...
5.8 Pixel Manipulation 143 top to bottom. The number of all values is saved in the attribute ImageData. data.length. Using a sim ...
144 Chapter 5—Canvas Figure 5.28 Modifying colors in the “CanvasPixelArray” You can initialize an empty ImageData object directl ...
5.8 Pixel Manipulation 145 little bit of math, we can even write our own color filters for manipulating images. We will show you ...
«
3
4
5
6
7
8
9
10
11
12
»
Free download pdf