📅 最后修改于: 2023-12-03 14:43:32.930000 🧑 作者: Mango
在 Web 开发中，绘制框是一个非常常见的需求，它用于实现各种交互效果，例如选中某个元素、拖动某个元素、手动绘制某些图形等等。在 JavaScript 中，我们可以使用 Canvas 或 SVG 来实现绘制框的功能。
Canvas 是一个 HTML5 的标准，它为我们提供了一个在页面上绘制图形的 API，其中包含了绘制线条、矩形、文本、图像等等的方法。下面我们来看一个绘制矩形的例子：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(10, 10, 150, 75);
这段代码使用 Canvas 的 fillRect() 方法绘制了一个红色的矩形，其中 fillStyle 属性设置矩形的填充颜色，后面的四个参数分别指定了起点的 x 坐标、y 坐标、矩形的宽度和高度。这段代码需要在 HTML 中指定一个 id 为 myCanvas 的 Canvas 元素，例如：
<canvas id="myCanvas" width="200" height="100"></canvas>
Canvas 绘制矩形的 API 还有很多其他的方法，例如 strokeRect() 绘制空心矩形、clearRect() 清除矩形区域、rect() 绘制矩形路径等等。
SVG 是一个基于 XML 的标准，它也可以在页面上绘制图形，但是与 Canvas 不同的是，SVG 使用的是矢量图形，可以让我们更方便地实现缩放和旋转等效果。下面我们来看一个绘制矩形的例子：
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', '10');
rect.setAttribute('y', '10');
rect.setAttribute('width', '150');
rect.setAttribute('height', '75');
rect.setAttribute('fill', '#FF0000');
svg.appendChild(rect);
document.body.appendChild(svg);
这段代码创建了一个 SVG 元素和一个矩形元素，其中 setAttribute() 方法设置矩形的起点坐标、宽度、高度和填充颜色。这段代码需要将 SVG 元素插入到 HTML 中，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG 绘制框</title>
</head>
<body>
</body>
</html>
SVG 绘制矩形的 API 还有很多其他的属性和方法，例如 stroke 设置线条颜色、stroke-width 设置线条宽度、rx 和 ry 设置圆角半径等等。
Canvas 和 SVG 都可以用于绘制框的功能，Canvas 适合绘制像素级别的图形，而 SVG 更适合绘制矢量图形。不同的场景可以选择不同的 API 来实现需求。