HTML and CSS Reference
In-Depth Information
// Use the gradient for the fillStyle.
context . strokeStyle = gr ;
context . beginPath ();
context . moveTo ( 0 , 0 );
context . lineTo ( 50 , 0 );
context . lineTo ( 100 , 50 );
context . lineTo ( 50 , 100 );
context . lineTo ( 0 , 100 );
context . lineTo ( 0 , 0 );
context . stroke ();
context . closePath ();
}
Figure 2-28. A vertical gradient stroke
Diagonal gradients
You can easily create a diagonal gradient by varying both the second x and second y paramet-
ers of the createLinearGradient() function:
var
var gr = context . createLinearGradient ( 0 , 0 , 100 , 100 );
To create a perfect diagonal gradient, as shown in Figure 2-29 , fill a square that is the same
size as the diagonal gradient. The code is provided in Example 2-20 .
Example 2-20. A diagonal gradient
function
function drawScreen () {
var
var gr = context . createLinearGradient ( 0 , 0 , 100 , 100 );
// Add the color stops.
gr . addColorStop ( 0 , 'rgb(255,0,0)' );
gr . addColorStop (. 5 , 'rgb(0,255,0)' );
gr . addColorStop ( 1 , 'rgb(255,0,0)' );
// Use the gradient for the fillStyle.
context . fillStyle = gr ;
Search WWH ::




Custom Search