《HTML5 Canvas开发详解》——2.2 基本矩形

本节书摘来自异步社区《html5 canvas开发详解》一书中的第2章，第2.2节,作者： 【美】steve fulton , jeff fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

首先从最简单最原始的canvas内建的几何形状——矩形开始。在canvas上，绘制基本矩形有3种不同的方式：填充、描边或清除。创建矩形（或者其他形状）还可以使用路径，下一节即将讲到。

实现这3种操作的api函数如下。

在位置（x, y）处以宽为width、高为height绘制一个填充的矩形。

在位置（x, y）处以宽为width、高为height绘制一个矩形边框。它需要使用当前的strokestyle, linewidth, linejoin以及miterlimit设置。

在位置x, y处以宽为width、高为height，清除指定区域并使其完全透明（使用透明黑作为颜色）。

在使用这些功能之前，需要预先设置好canvas绘图时所需的填充或描边的样式。

设置这些样式最基本的方法就是使用24位的十六进制字符串。下面是第一个演示的示例。

在例2-1中，填充样式简单设为rgb黑色，描边样式设为传统的紫色，结果如图2-1所示。