HTML5 Canvas 绘制矩形HTML5 历史记录API

HTML5 Canvas 描边和填充

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

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

Stroke

Fill

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

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

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

示例

HTML5 Canvas not supported

测试看看 ‹/›上面示例运行结果:

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

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

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

HTML5 Canvas 绘制矩形HTML5 历史记录API