每当在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,10, 100,100);
}
</script>测试看看上面示例运行结果:
注意如何使用2D上下文的strokeStyle 和fillStyle属性分别设置描边样式和填充样式。
还要注意如何使用lineWidth属性设置蓝色矩形的描边宽度（轮廓） 。将lineWidth被设置为5，这意味着所概述矩形的线宽度为5。
最后，请注意如何指定2D上下文绘制填充矩形或描边矩形。