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. stroke Style?=?"#0000ff";
????context. linewidth ???=?5;
????context. stroke Rect(10,100);
}
</script>

上面示例运行结果:

注意如何使用2D上下文的 stroke Style?和fillStyle 属性 分别设置描边样式和填充样式。

还要注意如何使用 linewidth 属性 设置蓝色矩形的描边宽度（轮廓）?。将 linewidth 被设置为5，这意味着所概述矩形的线宽度为5。

最后，请注意如何指定2D上下文绘制填充矩形或描边矩形。

HTML5 Canvas 绘制矩形 ? ?HTML 5 代码规范

查看更多关于HTML5 Canvas 描边和填充的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92389