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

JavaScript并非天生就具备绘图能力，但它强大的编程能力和丰富的库，使得它成为了一个非常优秀的绘图工具。借助浏览器提供的Canvas和SVG两种技术，我们可以用JavaScript创建各种各样的图形，从简单的线条和形状到复杂的动画和游戏，甚至可以进行数据可视化。本文将深入浅出地介绍JavaScript绘图的两种主要方法：Canvas和SVG，并通过代码示例帮助你快速上手。

一、 Canvas：像素级别的绘图

Canvas是HTML5提供的一个绘图API，它基于像素操作，让你可以直接控制画布上的每一个像素点。这使得Canvas在处理复杂的图形和动画时具有很高的效率，特别适合用于游戏开发和实时图形渲染。Canvas使用JavaScript的绘图上下文（context）进行绘图，上下文对象提供了各种绘图方法，例如绘制线条、矩形、圆形、图像等等。 Canvas的绘图是基于状态的，这意味着每一次绘图操作都会影响后续的操作，因此需要谨慎控制绘图顺序和状态。

Canvas核心概念：
`` 元素： HTML中用于创建画布的元素，需要设置宽高属性。
绘图上下文 (context)：通过`('2d')`获取，用于执行绘图操作。
路径 (path)：一系列绘图指令的集合，用于创建复杂的形状。
样式 (style)：包括线条颜色、填充颜色、字体等等。

Canvas示例：绘制一个简单的圆形
const canvas = ('myCanvas');
const ctx = ('2d');
();
(100, 75, 50, 0, 2 * ); // 绘制圆形
= 'red'; // 设置填充颜色
(); // 填充圆形
= 'blue'; // 设置线条颜色
(); // 绘制圆形边框

这段代码首先获取Canvas元素和绘图上下文，然后使用`arc()`方法绘制一个圆形，最后使用`fillStyle`和`strokeStyle`设置颜色并进行填充和描边。

二、 SVG：矢量图的绘图

SVG (Scalable Vector Graphics) 是一种基于XML的矢量图形格式。与Canvas不同，SVG使用的是矢量图形，这意味着图形的质量不会因为缩放而降低。SVG更适合用于创建静态图形、图表和图标，以及需要高清晰度和可缩放性的应用。在JavaScript中，可以通过DOM操作直接修改SVG元素来进行绘图，或者使用一些SVG库来简化开发。

SVG核心概念：
SVG 元素： ``、``、``、`` 等元素用于创建不同的形状。
属性：每个SVG元素都拥有各种属性，例如 `cx`、`cy`、`r` (圆的属性)、`x`、`y`、`width`、`height` (矩形的属性) 等。
样式：可以使用CSS或内联样式来设置SVG元素的样式。

SVG示例：绘制一个简单的矩形
const svg = ('mySVG');
const rect = ("/2000/svg", "rect");
('x', 50);
('y', 50);
('width', 100);
('height', 50);
('fill', 'green');
(rect);

这段代码创建了一个矩形元素，并设置其属性，最后将其添加到SVG元素中。

三、 Canvas和SVG的比较

Canvas和SVG各有优劣，选择哪种技术取决于具体的应用场景：

特性
Canvas
SVG

渲染方式
像素级渲染
矢量渲染

缩放
缩放会失真
缩放不会失真

性能
高性能，适合动画和游戏
较低性能，但不适用于大型复杂图形

复杂度
需要手动绘制每个像素
使用XML结构，更容易构建复杂的图形

适用场景
游戏、动画、实时图形渲染
静态图形、图表、图标、需要高清晰度的图形