矢量 - JavaScript

矢量图形是指在计算机上用矢量形式描述的图形图像。相对于栅格图像，它们更易于缩放和修改，因为它们是由数学方程定义的。JavaScript可以用来创建和操作矢量图形，使其成为一种非常有用的工具。

SVG（可缩放矢量图形）

SVG是一种基于XML的格式，在web开发中广泛使用，可以用于创建矢量图形。它可以被JavaScript支持，因此可以在网站上动态地添加、删除或修改SVG元素，而不需要使用图像编辑器来创建新图像。以下是一个简单的SVG矩形示例：

<svg height="100" width="100">
  <rect x="10" y="10" width="80" height="80" />
</svg>

可以使用JavaScript来动态创建SVG元素并将其添加到HTML文档中：

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");
document.body.appendChild(svg);

const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", "10");
rect.setAttribute("y", "10");
rect.setAttribute("width", "80");
rect.setAttribute("height", "80");
svg.appendChild(rect);

Canvas

Canvas是一个HTML元素，可以使用JavaScript来向其绘制矢量和栅格图形。与SVG相比，它支持更广泛的效果和功能，但不支持矢量形状。以下是一个简单的Canvas示例：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 80, 80);

Canvas也可以使用JavaScript动态创建和操作：

const canvas = document.createElement("canvas");
canvas.setAttribute("width", "100");
canvas.setAttribute("height", "100");
document.body.appendChild(canvas);

const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 80, 80);

Snap.svg

Snap.svg是一个JavaScript库，它简化了使用SVG进行矢量图形操作的过程。它提供了一个良好的API来轻松地实现移动、旋转、缩放、颜色变换等操作，如下所示：

const paper = Snap("#svg");
const rect = paper.rect(10, 10, 80, 80);
rect.animate({width: 120, height: 120}, 1000);

Snap.svg还可以使用JavaScript动态创建和操作：

const paper = Snap(100, 100);
const rect = paper.rect(10, 10, 80, 80);
rect.attr({fill: "red"});

document.body.appendChild(paper.node);

结论

JavaScript是一种功能强大的工具，可用于创建和操作矢量图形。无论是使用SVG还是Canvas，还是Snap.svg这样的库，我们可以在网站上显示精美的图形。