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
PARTS:
Part 4
Part 5
Part 6
Part 7
Part 8
Part 9
Part 10
Part 11
Part 12
Part 13
Part 14
Part 15
Part 16
Prev | Current Page 157 | Next

Richard Wagner

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

5???;
context.fillRect(10,10,250,250);
context.strokeRect(10,10,250,250);
}



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


The first color stop is set to white, while the second is set to blue, and the third red. Once you assign
these using the addColorStop() method, the lg linearGradient object is assigned as the fillStyle
for the context . The fillRect() method is then called to paint the block. A gray border is added using
the strokeRect() method. Figure 6-9 shows the results.
Figure 6-9: Linear gradient can be set on the canvas.
(continued)
Chapter 6: Advanced Programming Topics: Canvas and Video
139
A radial gradient is created by using the createRadialGradient() method, and then adding color
stops at the appropriate position. For example:
function drawRadialGradient(){
var canvas = document.getElementById(???myCanvas??™);
var context = canvas.getContext(???2d??™);
var rg = context.createRadialGradient(45,45,10,52,50,35);
rg.addColorStop(0, ???#95b800??™);
rg.addColorStop(0.9, ???#428800??™);
rg.addColorStop(1, ???rgba(220,246,196,0)??™);
context.fillStyle = rg;
context.


Pages:
145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
The Adventures of Joel Pepper (page 277) Access 2007 Bible (page 1988) Volume 17, No. 489, May 14, 1831 (page 42)