HTML5 Canvas 描边和填充

每当在html5画布上绘制形状时，都需要设置两个属性Stroke(描边)和Fill(填充)

描边和填充属性

每当在HTML5画布上绘制形状时，都需要设置两个属性：

Stroke
Fill

Stroke(描边)和Fill(填充)确定如何绘制形状。Stroke是形状的轮廓。Fill是形状内部的内容。

在线示例

这是一个用蓝色笔划和绿色填充绘制的矩形示例（实际上是两个矩形）：

这是绘制这两个方框的代码：

上面示例运行结果:

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

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

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

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！