在HTML5画布中绘制矩形实例

本文主要介绍了在HTML5画布中绘制矩形的例子。在本文中，用，strokerect和clearRect用于三种API。
这篇文章是由史提夫富尔顿杰夫富尔顿HTML5画布，2章，基本矩形shape翻译；。

让我们在画布上的内置简单的几何图形——一看；矩形图。在画布上，有三种方法：画一个矩形填充（用）、脑卒中（strokerect）和间隙（clearRect）。当然，我们也可以使用路径来描述所有图形包括矩形。

以下是API：上述三种方法

1.fillrect（x，y，宽度，高度），宽度在宽度和高度高度实心矩形从（x，y）。
2.strokerect（x，y，宽度，高度）。画宽宽度和高度高度由一个矩形框（x，y），矩形渲染成不同风格基于strokeStyle，线宽，线连接，并miterlimit属性的当前设置。
3.clearrect（x，y，宽度，高度）。清理一个矩形区域的宽度的宽度与初高高度（x，y），使它完全透明。

在调用上述方法的画布之前，我们需要设置填充和笔划样式。设置这些样式的最基本方法是使用24位颜色（由16进制字符串表示）：

复制代码代码如下所示：
context.fillstyle =# 000000 ；
context.strokestyle =# ff00ff ；

在下面的示例中，将填充颜色设置为黑色，紫色设置为笔划：

复制代码代码如下所示：
功能drawscreen（）{
context.fillstyle =# 000000 ；
context.strokestyle =# ff00ff ；
context.linewidth = 2；
context.fillrect（10, 10, 40，40）；
context.strokerect（0, 0, 60，60）；
context.clearrect（20, 20, 20，20）；
}

代码执行的结果如下图所示：