JavaScript 绘图：从入门到进阶，玩转 Canvas 和 SVG8

JavaScript 不仅仅是用于网页交互的脚本语言，它强大的绘图能力也常常被开发者忽视。事实上，借助 HTML5 的 Canvas 和 SVG 元素，JavaScript 可以实现丰富的图形绘制功能，从简单的线条到复杂的动画，甚至可以构建完整的绘图应用。本文将深入探讨 JavaScript 的绘图能力，涵盖 Canvas 和 SVG 两种主要方法，并辅以代码示例，帮助读者快速上手。

一、 Canvas：像素级绘图利器

Canvas 元素是一个 2D 渲染上下文，它允许你通过 JavaScript 代码直接操作像素，以实现各种绘图效果。其核心在于 `CanvasRenderingContext2D` 对象，它提供了一系列方法用于绘制路径、填充形状、添加图像等。Canvas 的优点在于性能高效，尤其适合绘制需要实时更新的图形，比如游戏和动画。缺点是绘制的图形是位图，不易缩放，缩放后会失真。

让我们来看一个简单的 Canvas 绘图例子：绘制一个红色的矩形。```javascript
const canvas = ('myCanvas');
const ctx = ('2d');
= 'red';
(10, 10, 150, 100);
```

这段代码首先获取 Canvas 元素和其 2D 渲染上下文，然后设置填充颜色为红色，最后使用 `fillRect()` 方法绘制一个红色矩形，其左上角坐标为 (10, 10)，宽度为 150 像素，高度为 100 像素。 Canvas 还提供了其他许多方法，例如 `strokeRect()` 绘制矩形边框，`arc()` 绘制圆弧，`beginPath()` 和 `closePath()` 用于创建路径，`lineTo()` 连接路径点等等，可以组合使用实现复杂的图形绘制。

更进一步，我们可以利用 Canvas 绘制动画。例如，一个简单的移动的圆形：```javascript
const canvas = ('myCanvas');
const ctx = ('2d');
let x = 50;
let y = 50;
function draw() {
(0, 0, , ); // 清除画布
();
(x, y, 20, 0, 2 * );
= 'blue';
();
x += 1;
if (x > ) {
x = 0;
}
requestAnimationFrame(draw);
}
draw();
```

这段代码利用 `requestAnimationFrame()` 方法实现动画循环，每次循环清除画布，重新绘制圆形，并更新圆形的 x 坐标，实现圆形的水平移动。 `requestAnimationFrame` 比 `setInterval` 更高效，能更好地与浏览器刷新率同步，避免动画卡顿。

二、 SVG：矢量图形的优雅选择

SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图形格式。与 Canvas 不同，SVG 绘制的是矢量图形，这意味着图形的质量不会随着缩放而降低。SVG 的图形元素可以直接通过 JavaScript 操作，比如改变颜色、位置、大小等。SVG 更适合绘制静态图形或需要高清晰度缩放的图形，例如图标、图表等。

我们可以通过 JavaScript 创建 SVG 元素，并设置其属性来绘制图形。例如，绘制一个红色的矩形：```javascript
const svgns = "/2000/svg";
const rect = (svgns, "rect");
("x", 10);
("y", 10);
("width", 150);
("height", 100);
("fill", "red");
('mySVG').appendChild(rect);
```

这段代码创建了一个 `` 元素，并设置其属性，然后将其添加到 SVG 元素中。SVG 还提供了其他形状元素，例如 ``、``、``、``、`` 等，以及更复杂的路径元素 ``，用于绘制各种复杂的形状。

三、 Canvas 和 SVG 的比较

Canvas 和 SVG 都有各自的优缺点，选择哪种方法取决于具体的应用场景：
Canvas：性能高，适合动画和实时图形渲染，但缩放会失真。
SVG：缩放清晰，适合静态图形和需要高清晰度缩放的图形，但性能可能不如 Canvas。

在实际应用中，可以根据需要选择合适的绘图方法，甚至可以结合 Canvas 和 SVG 的优势，共同完成复杂的绘图任务。

四、进阶技巧

除了基本的绘图功能，JavaScript 还提供了许多进阶技巧，例如：
图像处理：使用 Canvas API 进行图像的裁剪、缩放、旋转、滤镜等操作。
动画库：使用诸如 GreenSock (GSAP) 或等动画库，简化动画的创建和管理。
数据可视化：使用 JavaScript 库，例如或，创建交互式图表和数据可视化。

学习 JavaScript 绘图是一个持续学习的过程，不断探索和实践才能掌握更高级的技巧，创造出更丰富的图形效果。通过对 Canvas 和 SVG 的深入理解和灵活运用，你就能用 JavaScript 绘制出令人惊艳的图形作品！

2025-08-22

上一篇：JavaScript长按事件实现详解及应用场景

下一篇：深入浅出JavaScript中的“猿类”编程：理解和避免Ape-like代码