Setting Opacity

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.

Listing 10.8. Changing opacity
<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?

Figure 10.8. Playing with opacity

[View full size image]

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset