HTML 画布入门（三）使用 HTML 画布创建形状

1、使用 HTML 画布创建形状

由于HTML画布是一种图形工具，因此不用说，它允许我们绘制形状。我们可以使用许多不同的功能来绘制新的形状，这些函数可以通过 we set 使用。如果你是 HTML 画布的新手，请从第一节开始。

在本指南中，我们将介绍如何使用 HTML 画布制作一些最基本的形状 - 正方形、矩形、圆形和三角形。

2、使用 HTML 画布创建矩形和正方形

正方形和矩形在HTML5 Canvas中很容易制作。我们可以使用许多不同的功能来制作 rect

• rect（x， y， width， height） - 勾勒出矩形或正方形应该在哪里，但不填充它。
• fillRect（x， y， width， height） - 创建一个矩形并立即填充它。
• strokeRect（x， y， width， height） - 创建一个矩形，并立即用笔画勾勒出它的轮廓。

如您所见，所有这些函数都遵循相同的格式 - 它们在开始位置具有坐标，以及画布中的宽度和高度。

让我们看一些代码示例。

使用 rect() 创建一个矩形

如果我们想用来创建一个矩形，然后填充和描边它，我们需要定义 和 .例如，下面的代码将创建一个从 (10, 10) 开始的矩形，尺寸为 ，背景#b668ff，白色笔划宽 5px：