在现代的网页开发中，<canvas> 元素被广泛用于图形绘制。它通过 JavaScript 提供了一种动态生成图像的方法，这给网页带来了丰富多彩的视觉效果。canvas 的一个核心功能是绘制图形，其中最基础的便是矩形（rect）。
<canvas> 元素简介
<canvas> 是 HTML5 中新增的元素，用于通过 JavaScript 绘制图像和图形。它实际上是一个画布，你可以通过脚本来对其进行操作，绘制路径、矩形、圆形、文本，甚至是复杂的动画和图像处理。canvas 元素本身没有能力绘制，它主要依赖于 JavaScript 中的 API 来实现各种绘图功能。
要使用 <canvas>，首先需要在 HTML 中添加该标签：
<canvas id="myCanvas" width="500" height="400"></canvas>在此示例中，id 属性用于标识该画布，width 和 height 属性则定义了画布的大小。
获取绘图上下文
使用 <canvas> 后，我们需要通过 JavaScript 获取其绘图上下文（context）对象。这个对象提供了用于在画布上绘图的方法和属性。
以下是获取二维绘图上下文的基本方法：
var canvas = document.getElementById(myCanvas); var context = canvas.getContext(2d);此代码获取到一个二维绘图上下文，接下来就可以使用上下文对象的 API 来绘制图形。
绘制矩形（rect）
在 canvas 中，矩形是最基本的形状之一。使用 canvas 绘制矩形有多个方法：
fillRect(x, y, width, height)：绘制一个填充的矩形。 strokeRect(x, y, width, height)：绘制一个矩形的边框。 clearRect(x, y, width, height)：清除指定矩形区域，使其完全透明。每个方法带有四个参数：x 和 y 定义矩形的起始点，width 和 height 定义矩形的宽度和高度。
示例：绘制矩形
以下是如何使用这些方法绘制不同类型矩形的示例：
// 获取画布和上下文 var canvas = document.getElementById(myCanvas); var context = canvas.getContext(2d); // 绘制一个填充矩形 context.fillStyle = blue; // 设置填充颜色 context.fillRect(20, 20, 150, 100); // 绘制填充矩形 // 绘制矩形边框 context.strokeStyle = red; // 设置边框颜色 context.strokeRect(200, 20, 150, 100); // 绘制边框矩形 // 清除一个矩形区域 context.clearRect(30, 30, 50, 50); // 清除矩形区域在上面的示例中，我们首先使用 fillStyle 属性设置了矩形的填充颜色，然后使用 fillRect 方法绘制了一个位于 (20, 20) 且宽 150 像素、高 100 像素的蓝色矩形。接着，我们使用 strokeRect 方法绘制了一个红色的边框矩形。*，我们使用 clearRect 来清理一个区域，它是一个位于 (30, 30) 且宽高均为 50 像素的透明矩形区域，这样就可以看到下方被清除的区域。
复杂应用
虽然矩形是最简单的形状，但通过组合它们可以创造出复杂的图形。你可以通过调整位置、大小和颜色，以及结合其他的 canvas API 方法，如路径绘制、阴影应用、渐变填充、图像绘制等，来获得更丰富的视觉效果。
例如，可以通过使用线性渐变来填充矩形：
var gradient = context.createLinearGradient(0, 0, 170, 0); gradient.addColorStop(0, black); gradient.addColorStop(1, white); context.fillStyle = gradient; context.fillRect(20, 150, 150, 100);这里我们创建了一个线性渐变，从黑色渐变到白色，然后使用这个渐变来填充一个矩形。
性能考虑
在使用 canvas 时，性能是一个重要的考量因素，特别是在涉及到动画或大量图形绘制的时候。每次绘制都会影响性能，尤其是在低端设备上。因此，可以通过减少重绘次数、使用缓存画布（offscreen canvas）等技术来提高性能。
结论
<canvas> 元素及其 API 为开发者提供了强大的工具集来创建复杂的图形和动画效果。理解基本的绘图方法如矩形绘制，是更深入掌握 canvas 技术的基础。通过对这些基础的掌握，开发者可以创造出更为丰富和交互式的网页体验。