在画布上绘制矩形 JavaScript

在 Web 开发中，经常需要在画布上绘制各种图形，其中矩形是最基础、常用的图形之一，而 JavaScript 提供了各种 API 来方便我们在画布上绘制矩形。

HTML 画布

在绘制矩形之前，首先需要创建一个可以绘制的画布，而在 HTML 中，我们可以通过 <canvas> 元素来创建画布。例如：

<canvas id="canvas" width="500" height="500"></canvas>

以上代码创建了一个宽度为 500px，高度为 500px 的画布，而 id 属性用于在 JavaScript 中获取该画布的引用。

获取画布上下文

要在画布上绘制图形，需要先获取画布的上下文（context），而在 JavaScript 中，可以通过 getContext() 方法获取画布上下文。例如：

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

以上代码获取了 id 为 canvas 的画布元素，并通过 getContext() 方法获取了画布的上下文 ctx。

绘制矩形

获取画布上下文后，就可以使用各种 API 来绘制图形了。其中，绘制矩形需要使用 fillRect() 或 strokeRect() 方法。

fillRect()

fillRect() 方法用于绘制实心填充的矩形。它接受四个参数，分别是矩形左上角的 x 坐标、矩形左上角的 y 坐标、矩形的宽度和高度。例如：

ctx.fillStyle = 'red' // 设置填充颜色为红色
ctx.fillRect(50, 50, 100, 100) // 绘制一个左上角坐标为 (50,50)，宽度为 100，高度为 100 的红色实心填充矩形

以上代码绘制了一个左上角坐标为 (50,50)，宽度为 100，高度为 100 的红色实心填充矩形。

strokeRect()

strokeRect() 方法用于绘制空心边框的矩形。它接受四个参数，分别是矩形左上角的 x 坐标、矩形左上角的 y 坐标、矩形的宽度和高度。它的用法和 fillRect() 类似，只是需要使用 stroke() 方法来绘制边框线条。例如：

ctx.strokeStyle = 'blue' // 设置边框颜色为蓝色
ctx.strokeRect(200, 50, 100, 100) // 绘制一个左上角坐标为 (200,50)，宽度为 100，高度为 100 的蓝色空心边框矩形

以上代码绘制了一个左上角坐标为 (200,50)，宽度为 100，高度为 100 的蓝色空心边框矩形。

总结

通过以上介绍，我们可以得出如下 JavaScript 代码片段，用于在画布上绘制红色实心填充矩形和蓝色空心边框矩形：

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

ctx.fillStyle = 'red'
ctx.fillRect(50, 50, 100, 100)

ctx.strokeStyle = 'blue'
ctx.strokeRect(200, 50, 100, 100)

以上代码会在画布上绘制两个不同的矩形，如下图所示：