每當在html5畫布上繪制形狀時，都需要設置兩個屬性stroke(描邊)和Fill(填充)

描邊和填充屬性

每當在html5畫布上繪制形狀時，都需要設置兩個屬性：

stroke
Fill

stroke(描邊)和Fill(填充)確定如何繪制形狀。stroke是形狀的輪廓。Fill是形狀內部的內容。

在線示例

這是一個用藍色筆劃和綠色填充繪制的矩形示例（實際上是兩個矩形）：

這是繪制這兩個方框的代碼：

示例

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
// 1.等待頁面完全加載。
window.onload = function() {
    drawExamples();
}
function drawExamples(){
    // 2.獲得對canvas元素的引用。
    var canvas  = document.getElementById("ex1");
 
   // 3.從canvas元素獲取2D上下文。
    var context = canvas.getContext("2d");
    // 4.繪制圖形。
    context.fillStyle = "#009900";
    context.fillRect(10,10, 100,100);
    context.strokeStyle = "#0000ff";
    context.linewidth   = 5;
    context.strokeRect(10,100);
}
</script>

上面示例運行結果:

注意如何使用2D上下文的strokeStyle 和fillStyle屬性分別設置描邊樣式和填充樣式。

還要注意如何使用linewidth屬性設置藍色矩形的描邊寬度（輪廓） 。將linewidth被設置為5，這意味著所概述矩形的線寬度為5。

最后，請注意如何指定2D上下文繪制填充矩形或描邊矩形。