Using Gradients
So far, you’ve been using monochromatic colors to fill your shapes. The fact is OpenLaszlo drawing toolkit is more than that. It allows you to produce gradient colors by using the createLinearGradient and createRadialGradient methods.
The code in Listing 10.9 is an LzDrawView object in action. It draws a few shapes and fill them with gradient colors.
Listing 10.9. Using gradient colors
<canvas height="200">
<drawview>
<method event="oninit">
// draw a rectangle;
this.rect(5, 5, 145, 150);
this.stroke();
// create a gradient
// that starts at the (5, 100) and ends at (150, 100)
var g = this.createLinearGradient(5, 5, 150, 5);
// set black as the starting color
g.addColorStop(0, 0x000000);
// set white as the ending color
g.addColorStop(1, 0xffffff);
this.fillStyle = g;
this.fill() ;
</method>
</drawview>
</canvas> |
To test and run the application in Listing 10.9, use the following URL.
http://localhost:8080/lps-4.0.x/app10/gradientTest1.lzx
Figure 10.9 shows the gradient colors.
Figure 10.9. Using gradient colors
For comparison, take a look at the code in Listing 10.10. It draws the same rectangle as the one in Listing 10.9 but with a slightly different gradient. The gradient used in the code in Listing 10.10 starts from the top-left corner of the gradient and ends at its bottom-right corner.
Listing 10.10. Another radial gradient
<canvas height="200">
<drawview>
<method event="oninit">
// draw a rectangle;
this.rect(5, 5, 145, 150);
this.stroke();
// create a gradient
// that starts at the (5, 100) and ends at (150, 100)
var g = this.createLinearGradient(5, 5, 150, 55);
// set black as the starting color
g.addColorStop(0, 0x000000);
// set white as the ending color
g.addColorStop(1, 0xffffff);
this.fillStyle = g;
this.fill();
</method>
</drawview>
</canvas> |
Test the application by directing your browser here.
http://localhost:8080/lps-4.0.x/app10/gradientTest2.lzx
Figure 10.10 shows a different linear gradient.
Figure 10.10. Another linear gradient
In addition to linear gradients, you can also use radial gradients. An example is given in Listing 10.11.
Listing 10.11. Using radial gradients
<canvas height="200">
<drawview>
<method event="oninit">
// draw a rectangle;
this.oval(100, 100, 75);
this.stroke();
// create a gradient
// that starts at the (5, 100) and ends at (150, 100)
var g =
this.createRadialGradient(0, 0, .2, 300, 250, 1);
// set black as the starting color
g.addColorStop(0, 0x000000);
// set white as the ending color
g.addColorStop(1, 0xffffff);
this.fillStyle = g;
this.fill();
</method>
</drawview>
</canvas> |
You can test and run the application in Listing 10.11 by using this URL:
http://localhost:8080/lps-4.0.x/app10/gradientTest3.lzx
Figure 10.11 shows the generated LZX application
Figure 10.11. Radial gradients
