《HTML5 精要剖析》- 3.3.2 線條樣式/配置顏色

2012-06-10

3312
0
HTML5

Canvas 當中，透過 stroke() 與 fill() 描繪指定顏色的線條或是圖形，這一編很快的來看看簡單的作法

在 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>

回首頁