What’s amazing with the OpenLaszlo drawing kit is the fact that it supports advanced and complex features. One of these features is the ability to change the opacity of a shape. You do this by changing the value of the globalAlpha attribute.
Consider the code in Listing 10.8 that uses different opacities for different shapes.
<canvas height="200"> <drawview height="200" width="600"> <method event="oninit"> this.rect(10, 10, 100, 80); this.stroke(); this.moveTo(60, 20); this.fillStyle = 0x00ee00; this.fill(); this.beginPath(); this.globalAlpha = 1; this.oval(100, 100, 75, 60); this.stroke(); this.moveTo(150, 100); this.fillStyle = 0x330000; this.fill(); this.beginPath(); this.rect(310, 10, 100, 80); this.stroke(); this.moveTo(60, 20); this.fillStyle = 0x00ee00; this.fill(); this.beginPath(); this.globalAlpha = 0.2; this.oval(300, 100, 75, 60); this.stroke(); this.moveTo(150, 100); this.fillStyle = 0x330000; this.fill(); </method> </drawview> </canvas> |
The first rectangle and the first oval are drawn with an opacity of 1. This is the most opaque. The second rectangle and the second oval are drawn with an opacity of 0.2. You can test the application by directing your browser to the following location:
http://localhost:8080/lps-4.0.x/app10/opacityTest1.lzx
Figure 10.8 shows two shapes with different opacities. Can you see the difference?