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.
<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.
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.
<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.
In addition to linear gradients, you can also use radial gradients. An example is given in Listing 10.11.
<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