Javascript 选择正确的技术（SVG与画布）

我正在编写一个用于形状操纵的应用程序，这样，在创建简单形状后，用户可以通过相互剪裁形状来创建更复杂的形状（即，将两个圆组合到一个使用单个路径而不是一组存储的图8中，或执行两个圆的相交以创建“咬”标记），我正试着决定使用一个图形库

SVG似乎可以处理80%的开箱即用功能（形状存储、移动、旋转、缩放）。问题在于，如果不在我自己的模块中重新创建SVG功能，那么其他20%（使用剪裁创建一组新的复杂多边形）似乎是不可能实现的（我必须将形状存储一次，用于在SVG中绘制，一次用于自己处理剪裁）。关于SVG我可能是错的，但通过阅读Raphael库（基于SVG），它似乎只处理使用矩形的剪切，甚至剪切是临时的（它只渲染部分形状，但仍然存储整个形状，以便在剪切矩形移动后重新渲染）。也许我只是对SVG标准感到困惑，但在SVG中，即使检索/解析路径以使用以前路径的子集计算新路径似乎也不明显（有一个Subpath（）函数，但我看不到任何东西可以找到两个多边形周长的交点，或将多个子路径合并为一条路径）

因此，Canvas似乎是一个更好的选择，因为它不会通过跟踪形状而引入额外的开销，而我已经必须跟踪这些形状才能使我自己的剪辑实现工作。不仅如此，我已经实现了可以移动、旋转和缩放的多边形类。然而，Canvas还有一些其他问题（我必须实现我自己的重画方法，我确信它不会像利用Chrome和Firefox中特定于浏览器的框架的SVG方法那样有效；我必须接受IE不兼容，这是通过Raphael等库免费处理的）

---

谢谢

这可能会解决您提到的问题

可以使用“clipPath”元素使用非矩形对象进行剪裁

例如，我有一个id为'clipper'的元素，它定义了要剪切的内容，还有一个要剪切的路径。不确定它们是否在此代码段中相交

<g clip-rule="nonzero">
  <clipPath id="clipper">
    <ellipse rx="70" ry="95" clip-rule="evenodd"/>
  </clipPath>

  <!-- stuff to be clipped -->
  <path clip-path="url(#clipper)" d="M-100 0 a100 50"/>
</g>

---

这只是我所拥有的东西的一个片段。希望它能有所帮助。

你说得对-无论使用SVG还是Canvas，你都必须在数学上执行剪裁和创建新形状。我有点偏见，使用SVG似乎更有用，因为您还可以免费将形状上的DOM事件（鼠标、拖动）和序列化等内容转换为图形格式。

在我看来，您正在尝试进行2D构造几何。由于SVG以保留模式运行，因此将存储绘制的对象，然后执行各种操作。使用Canvas时，您将在位图上运行，因此更改将立即生效。由于您的用户将在您的简单形状上执行更多操作，从而创建更复杂的形状，所以从长远来看，画布应该更适合您

---

唯一悬而未决的问题是，一旦用户使用完这些对象，将如何处理它们。如果你缩放图像，它会出现锯齿。SVG可以避免这个问题，但您需要在更大的复杂性和性能影响之间进行权衡。

SVG和canvas都是一种矢量图形技术。每种技术都有一些不同的功能

帆布

画布是一种位图，带有即时模式图形应用程序编程接口（API），用于在其上绘图。Canvas是一个“fire and forget”模型，它将图形直接渲染到位图，然后对绘制的形状没有感觉；只有生成的位图保留在周围

有关画布的更多信息-

SVG

SVG用于描述可伸缩矢量图形

SVG被称为保留模式图形模型，保存在内存模型中。与HTML类似，SVG构建元素、属性和样式的对象模型。当元素出现在HTML5文档中时，它的行为类似于内联块，并且是HTML文档树的一部分

有关SVG的更多信息-

---

有关画布与svg的详细信息，请参见此处-

svg测试套件中可以看到更多示例，从开始到结束（所有测试名为masking-*）excanvas将画布支持添加到IE6/7/8-