<canvas>與線條顏色樣式

在 Canvas 支援的繪圖功能中,無論線條或是圖形,均能選擇性的以特定顏色進行描繪,只要設定填色的對應值即可,我們可以透過三種不同格式的字串來表示各種顏色,對於某些預先定義的顏色,你可以直接指定這種顏色的名稱,例如Blue、Green或是Red 等。

你也可以利用RGB或是ARGB格式字串來表示不同的顏色,前者是RGB三原色red 、green 與blue 組合成的十六進位表示式,例如,藍色為#FF0000FF 、綠色為#FF008000 、紅色則是#FFFF0000 ,後者為代表透明度的alpha 值加上原來的RGB 。

如果想要設定的僅是線條的顏色,則在stroke() 方法描繪之前,預先設定strokeStyle 屬性值即可,如果想要填滿封閉區域,例如描繪一個實心的矩形,則必須設定fillStyle 屬性值,再透過fill() 進行描繪,考慮以下的範例圖示:


畫面中包含了兩個矩形,均是調用 rect() 定義描繪而成,左邊設定了 strokeStyle 為 red 然後調用stroke() 進行描繪,右邊則是設定了fillStyle 為 red 然後調用 fill() 進行描繪,程式碼如下:

<!DOCTYPE html >
<html>
<head>
    <title></title>
    <script>
        window.onload = function () {
            var c = document.getElementById('pcanvas0');
            var context = c.getContext('2d');
            context.strokeStyle = 'red';
            context.rect(60, 60, 400, 200);
            context.stroke();

            var c = document.getElementById('pcanvas1');
            var context = c.getContext('2d');
            context.fillStyle = 'red';
            context.rect(60, 60, 400, 200);
            context.fill();
        } 
    </script>
</head>
<body>
    <div>
        <canvas id="pcanvas0"
            style="border: 1px dotted gray; margin: 20px;" width="620"
            height="320">
        </canvas>
        <canvas id="pcanvas1"
            style="border: 1px dotted gray; margin: 20px;" width="620"
            height="320">
        </canvas></div>
</body>
</html>

沒有留言: