Using Fills

To make your drawing more appealing, fill your shapes with colors. The LZX application in Listing 10.7 displays a rectangle and an oval that are filled with different colors.

Listing 10.7. Using fills
<canvas height="200">
    <drawview height="200" width="600">
        <method event="oninit">
            this.rect(10, 10, 100, 30);
            this.stroke();
            this.moveTo(60, 20);
            this.fillStyle = 0x00ee00;
            this.fill();

            this.beginPath();
            this.oval(350, 100, 75, 10);
            this.stroke();
            this.moveTo(150, 100);
            this.fillStyle = 0x330000;
            this.fill();
        </method>
    </drawview>
</canvas>

Note that you need to move the brush to a coordinate inside the shape before calling fill. Also, call beginPath before start drawing the next shape.

To test the application in Listing 10.7, use this URL.

http://localhost:8080/lps-4.0.x/app10/fillTest1.lzx

Figure 10.7 shows the colorful shapes

Figure 10.7. Filling shapes with different colors


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

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