选择正确的技术（SVG vs Canvas） [英] Choosing right technology (SVG vs Canvas)
问题描述
我正在编写一个用于形状操作的应用程序，以便在创建简单的形状后，用户可以通过将形状相互对齐来创建更复杂的形状（即将两个圆形组合在一起成为使用单个路径而不是
SVG似乎可以处理80个图形库％的功能我需要开箱（形状存储，移动，旋转，缩放）。问题是，其他20％（使用剪切创建一组新的复杂多边形）似乎不可能实现，而无需重新创建SVG功能在我自己的模块（我不得不存储形状一次用于绘制SVG内，一次处理剪切我自己）。我可能是错误的关于SVG，但通过阅读关于Raphael库（基于SVG），它似乎只使用一个矩形处理剪切，即使剪切是临时的（它只呈现部分的形状，但仍然存储整个形状一旦剪切矩形被移动就被重新渲染）。也许我只是困惑SVG标准，但即使检索/解析路径使用以前的路径子集计算一个新的路径似乎在SVG中是不明显的（有一个Subpath（）函数，但我没有看到任何东西找到两个多边形周长的交点，或将几个子路径组合到一个路径中）。
结果，Canvas看起来像一个更好的替代品，因为它不通过跟踪我已经必须跟踪的形状来引入额外的开销，使我自己的剪切实现工作。不仅如此，我已经实现了可以移动，旋转和缩放的多边形类。 Canvas有一些其他问题，但是（我必须实现自己的重绘方法，我相信它不会像SVG一样高效，利用浏览器特定的框架在Chrome和Firefox;我会有
感谢
svg和canvas都是一种矢量图形技术。每个都有一些不同的功能。
画布
Canvas是一个带有即时模式图形应用程序编程接口（API）的位图，用于绘制它。画布是一个火和忘记模型，它的图形直接到其位图，然后没有对所画的形状的感觉;
有关canvas的更多信息 -
I'm writing an app for shape manipulation, such that after creating simple shapes the user can create more complex ones by clipping the shapes against each other (i.e. combining two circles together into a figure 8 stored using a single path rather than a group, or performing intersection of two circles to create a "bite" mark), and am trying to decide on a graphics library to use.
SVG seems to handle 80% of the functionality I need out of the box (shape storage, movement, rotation, scaling). The problem is that the other 20% (using clipping to create a new set of complex polygons) seems impossible to achieve without recreating SVG functionality in my own modules (I'd have to store the shape once for drawing inside SVG, and once for processing clipping myself). I could be wrong about SVG, but by reading about Raphael library (based on SVG), it seems like it only handles clipping using a rectangle, and even that clipping is temporary (it only renders part of the shape, but still stores entire shape to be rerendered once the clipping rectangle is moved). Perhaps I'm just confused about SVG standard, but even retrieving/parsing the paths to compute a new path using subsets of previous paths seems non-obvious in SVG (there is a Subpath() function, but I don't see anything to find the points of intersection of two polygon perimeters, or combine several subpaths into a single path).
As a result, Canvas seems like a better alternative since it doesn't introduce the extra overhead by keeping track of shapes I'd already have to keep track of to make my own clipping implementation work. Not only that, I've already implemented the polygon class that can be moved, rotated, and scaled. Canvas has some other issues, however (I'd have to implement my own redraw method, which I'm sure will not be as efficient as SVG one that takes advantage of browser-specific frameworks in Chrome and Firefox; and I'd have to accept IE incompatibility which is handled for free with libraries like Raphael).
Thanks
Both svg and canvas are a vector graphical technology.Each one having some different functionality.
Canvas
Canvas is a bitmap with an immediate modegraphics application programming interface (API) for drawing on it. Canvas is a "fire and forget" model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around.
More Information about canvas - http://www.queryhome.com/51054/about-html5-canvas
SVG
SVG is used to describe Scalable Vector Graphics
SVG is known as a retained mode graphics model persisting in an in-memory model. Analogous to HTML, SVG builds an object model of elements, attributes, and styles. When the element appears in an HTML5 document, it behaves like an inline block and is part of the HTML document tree.
More Information about SVG - http://www.queryhome.com/50869/about-svg-part-1
See here for more information about canvas vs svg in detail - Comparing svg vs canvas
这篇关于选择正确的技术（SVG vs Canvas）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
