HTML5 Guidelines for Web Developers
146 Chapter 5—Canvas Figure 5.29 Color manipulation with “getImageData()” and “putImageData()” For converting the color to shade ...
5.8 Pixel Manipulation 147 (r+g+b)/3.0 ); return [val,val,val,a]; }; With grayLuminosity(), we are using the second formula in F ...
148 Chapter 5—Canvas var swapChannels = function(r,g,b,a,order) { var rgba = [r,g,b,a]; return [ rgba[order[0]], rgba[order[1]], ...
5.9 Compositing 149 5.9 Compositing The possibilities of compositing in Canvas are many and varied, but you will only find a few ...
150 Chapter 5—Canvas The circle is the source (A); the rectangle is the destination (B). Let’s use the Porter- Duff terms to exp ...
5.9 Compositing 151 Figure 5.31 Compositing operation “destination-in” with image and text The light gray text is again written ...
152 Chapter 5—Canvas Figure 5.32 Compositing operation “lighter” with 16 base colors We will encounter the compositing operator ...
5.10 Patterns 153 Figure 5.33 Checkered pattern in eight color combinations The pattern is created as an in-memory canvas with a ...
154 Chapter 5—Canvas Patterns are anchored to the coordinate origin and applied starting from that point. If we were to begin fi ...
5.10 Patterns 155 The first two lines create a new Image object, setting its src attribute to the image pattern_125.png in the f ...
156 Chapter 5—Canvas Before moving on to another section of the Canvas specification, Transforma- tions, we should mention that ...
5.11 Transformations 157 must be carried out in reverse order: In terms of JavaScript code, they basically must be read from bac ...
158 Chapter 5—Canvas Listing 5.2 shows the very short source code in Figure 5.36. Listing 5.2 Source code of the transformations ...
5.11 Transformations 159 Table 5.3 Components of a Canvas matrix transformation Component Content m11 Scale in x-axis m12 Horizo ...
160 Chapter 5—Canvas or rotated. The same goes for putImageData(imagedata,0,0), where the top-left corner serves as an anchor po ...
5.11 Transformations 161 var clipIcon = function(img,x,y,width,height) { var cvs = document.createElement("CANVAS"); var ctx = c ...
162 Chapter 5—Canvas In createReflection() we first use another in-memory canvas to flip the lower half of the image section pas ...
5.12 Base64 Encoding with “canvas.toDataURL( )” 163 context.setTransform(1,0,0,1,60,160); context.transform(1,Math.tan(-0.175),0 ...
164 Chapter 5—Canvas in-memory canvas permanently available in HTML, enabling the user or an ap- plication to save it. The first ...
5.13 “save( )” and “restore( )” 165 5.13 “save()” and “restore()” Our journey through CanvasContext2D is nearly at an end. Only ...
«
4
5
6
7
8
9
10
11
12
13
»
Free download pdf