《HTML5 Canvas開發詳解》——2.2 基本矩形

本節書摘來自異步社群《html5 canvas開發詳解》一書中的第2章，第2.2節,作者： 【美】steve fulton , jeff fulton 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

首先從最簡單最原始的canvas内建的幾何形狀——矩形開始。在canvas上，繪制基本矩形有3種不同的方式：填充、描邊或清除。建立矩形（或者其他形狀）還可以使用路徑，下一節即将講到。

實作這3種操作的api函數如下。

在位置（x, y）處以寬為width、高為height繪制一個填充的矩形。

在位置（x, y）處以寬為width、高為height繪制一個矩形邊框。它需要使用目前的strokestyle, linewidth, linejoin以及miterlimit設定。

在位置x, y處以寬為width、高為height，清除指定區域并使其完全透明（使用透明黑作為顔色）。

在使用這些功能之前，需要預先設定好canvas繪圖時所需的填充或描邊的樣式。

設定這些樣式最基本的方法就是使用24位的十六進制字元串。下面是第一個示範的示例。

在例2-1中，填充樣式簡單設為rgb黑色，描邊樣式設為傳統的紫色，結果如圖2-1所示。