《HTML5 精要剖析》- 3.3.1. 線條樣式/線條寬度

2012-06-03

2504
0
HTML5

接下來這幾篇都很短，快速的談談線條的樣式設定，因為這一段課程接下來會觸及統計圖表的設計，我們可透過樣式的設定來描繪不同的資料區塊…

線條可以透過預先指定lineWidth 屬性，以調整輸出的線條寬度，例如以下的程式碼：


context.lineWidth = 28 ;

這一行將lineWidth 屬性值設定為20 ，後續描繪線條時，便會以 28 的寬度描繪線條。

接下來的範例以不同寬度描繪線條，以下列舉網頁的呈現效果：

於畫面中配置兩個Canvas 區域，並以虛線表示，上方的區域中，以預設的寬度，也就是不設定lineWidth 屬性描繪一條水平直線，下方的區域則是設定了 lineWidth 為36 ，因此描繪出來的線條就比較寬。


<!DOCTYPE html >
<html >
<head>
    <title></title>
    <script>
        window.onload = function () {
            var canvas = document.getElementById('pcs1');
            var context = canvas.getContext('2d');           
            context.moveTo(100, 40);
            context.lineTo(600, 40);
            context.stroke();
            //
            canvas = document.getElementById('pcs2');
            context = canvas.getContext('2d');
            context.lineWidth = 36;
            context.moveTo(100, 40);
            context.lineTo(600, 40);
            context.stroke();
        };
    </script>
</head>
<body>
<canvas  id="pcs1" width="800px" height="120px" 
         style="border:1px dotted;margin:20px; " ></canvas>

<canvas  id="pcs2" width="800px" height="120px" 
         style="border:1px dotted;margin:20px; " ></canvas>
</body>
</html>

如你所見，其中的Script 分成兩段，並且取得第一個以及第二個 Canvas 區域的參照，然後於第二個 Canvas 描繪之前設定 lineWidth 屬性，除此之外，這兩段描繪直線的程式碼完全相同。

回首頁