HTML5 教程HTML5 浏览器支持HTML5 新元素HTML5 Video 视频HTML 5 Video + DOMHTML5 Audio 音频HTML5 拖放 ( drag 和 drop )HTML5 Canvas画布HTML5 内联 SVGHTML5 MathML 数学公式HTML5 Geolocation 地理定位HTML5 新的 Input 类型HTML5 表单元素HTML5 表单属性HTML5 语义元素HTML5 Web 存储HTML5 Web SQL 数据库HTML5 应用程序缓存HTML5 Web WorkersHTML 5 服务器发送事件HTML5 WebSocketHTML5 历史记录APIHTML 5 代码规范HTML5 Canvas 描边和填充HTML5 Canvas 绘制矩形HTML5 Canvas 清除画布HTML5 Canvas 路径HTML5 Canvas 渐变HTML5 Canvas 阴影HTML5 Canvas 绘制文本HTML5 Canvas 绘制图像HTML5 Canvas 合成HTML5 Canvas 状态HTML5 Canvas toDataURL()HTML5 Canvas 像素处理HTML5 Canvas 制作动画HTML5 Canvas 转换
HTML5 Canvas 描边和填充
每当在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上下文绘制填充矩形或描边矩形。