SEARCH
0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Prev | Current Page 152 | Next

Richard Wagner

"Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari"

drawImage( img, 0, 0 );
}
}



top:0px; z-index:1???/>


Figure 6-4 shows the image displayed inside of the canvas. Keep in mind that this is not an HTML img
element, but the external image file drawn onto the context of the canvas.
Chapter 6: Advanced Programming Topics: Canvas and Video
132
Figure 6-4: Drawing an image onto the canvas
Additionally, there is a final drawImage() option that is slightly more complex:
context.drawImage(image, sourcex, sourcey, sourceWidth, sourceHeight, destx, desty,
destWidth, destHeight)
In this variant, the method draws a subsection of the image specified by the source rectangle ( sourcex,
sourcey, sourceWidth, sourceHeight ) onto a destination rectangle specified by the final arguments
( destx, desty, destWidth, destHeight ). For example, suppose you just wanted to display the
rock thrower in Figure 6-4 rather than the entire picture. Using this expanded syntax of drawImage() ,
you want to extract a 79 ?— 131px rectangle from the original picture starting at the coordinate
(151, 63). You then paint the same sized rectangle at coordinate (10, 10) on the canvas.


Pages:
140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164