每當(dāng)在HTML5畫(huà)布上繪制形狀時(shí)，都需要設(shè)置兩個(gè)屬性Stroke(描邊)和Fill(填充)
每當(dāng)在HTML5畫(huà)布上繪制形狀時(shí)，都需要設(shè)置兩個(gè)屬性：
Stroke
Fill
Stroke(描邊)和Fill(填充)確定如何繪制形狀。Stroke是形狀的輪廓。Fill是形狀內(nèi)部的內(nèi)容。
這是一個(gè)用藍(lán)色筆劃和綠色填充繪制的矩形示例（實(shí)際上是兩個(gè)矩形）：
這是繪制這兩個(gè)方框的代碼：
<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
// 1.等待頁(yè)面完全加載。
window.onload = function() {
drawExamples();
}
function drawExamples(){
// 2.獲得對(duì)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,10, 100,100);
}
</script>測(cè)試看看 ?/?上面示例運(yùn)行結(jié)果:
注意如何使用2D上下文的strokeStyle 和fillStyle屬性分別設(shè)置描邊樣式和填充樣式。
還要注意如何使用lineWidth屬性設(shè)置藍(lán)色矩形的描邊寬度（輪廓） 。將lineWidth被設(shè)置為5，這意味著所概述矩形的線寬度為5。
最后，請(qǐng)注意如何指定2D上下文繪制填充矩形或描邊矩形。