canvas 画方框

Canvas 是 HTML5 中的一个内置元素，用于在网页上进行绘图和图形渲染。如果你想使用 Canvas 画一个方框，你可以遵循这些基本步骤：

1. 创建 canvas 元素：在 HTML 中添加一个 `canvas` 标签，并设置其 id，如 `<canvas id="myCanvas" width="400" height="400"></canvas>`。

2. 获取 2D 绘图上下文：在 JavaScript 中，通过 `document.getElementById()` 获取 canvas 元素，并调用 `getContext("2d")` 来获取 2D 绘图上下文。

   const canvas = document.getElementById("myCanvas");
   const ctx = canvas.getContext("2d");

3. 绘制方框：使用 `fillRect()` 方法或 `strokeRect()` 方法来绘制填充色的矩形或边框矩形。这两个方法都需要四个参数：x 坐标、y 坐标、宽度和高度。

   // 绘制一个填充色为红色、边框为黑色的方框
   ctx.fillStyle = "red";
   ctx.strokeStyle = "black";
   ctx.fillRect(50, 50, 100, 100);
   // 或者只画边框
   ctx.strokeRect(50, 50, 100, 100);

4. 渲染 canvas：调用 `canvas` 的 `drawImage()` 或 `requestAnimationFrame()` 方法来显示绘制的内容，或者直接在浏览器窗口中查看结果。

// 显示方框
canvas.draw();