什么是你可以用canvas而不是SVG？

Question

我正在研究项目我需要在SVG和Canvas之间进行选择。我发现SVG在大多数情况下都是最好的。

你有什么不能用SVG做但你可以使用Canvas吗？

Answer 1

<强>首先，

如果您已经在SVG学习曲线上投入了大量时间，那么您很可能在没有Canvas的情况下完成项目，因为这两个元素的功能非常相似。 Canvas有一个相当大的＆amp;陡峭的学习曲线，你可能想避免“中期项目”。

与流行观点相反...... Canvas和SVG都使用矢量绘图命令！

他们使用矢量命令在绘图表面上绘制线条和曲线。 Canvas和SVG都将这些图形作为像素渲染到其元素表面上。

并...

Canvas和SVG都可以对图形进行变换（偏移，旋转和缩放）。 Canvas和SVG都可以将样式应用于其绘图（填充颜色，笔触颜色，不透明度等）。

<强>可是...

SVG更进一步，“记住”所有绘图命令。这意味着即使在缩放时，SVG也可以重新发出这些绘图命令。因此，SVG非常适合必须缩放而不会变得“锯齿”的图纸。您甚至可以使用CSS重新设计图纸样式（更改颜色，不透明度，位置，旋转等）。这通常非常有用。例如，你可以让一个SVG豹子用CSS改变它的斑点颜色

Canvas只是“吸引并忘记” - 它没有记住它被绘制的内容或位置。因此，它是一个更轻的元素。你说：“但帆布会让所有那些带有移动玩家的游戏”。使用canvas，编程实践是擦除画布并在新位置重绘任何形状。这给人一种错觉，即命令移动形状（它们不是）。 Canvas在这些重绘时非常快，并且可以轻松地以每秒60帧的速度重绘适度复杂的游戏场景。这个速度需要付出代价。你必须“记住”场景元素的位置，以便以后可以在新的位置和新的样式中重新渲染它们。 （没有简单的CSS能力使画布豹改变其斑点）。

SVG图纸附带已经内置的传统鼠标事件。画布仅在画布上作为一个整体而不是在单个图形上激发传统鼠标事件（因为画布忘记了它绘制的形状）。因此，如果您想获得与单个画布形状相关的鼠标事件，您必须（1）记住您绘制形状的位置（2）在整个画布上侦听鼠标事件，（3）检查鼠标是否在任何形状内（这可以通过数学方式轻松完成）然后为您发现的形状处理鼠标事件。 Canvas元素需要更多代码才能实现。

恕我直言，画布闪耀的一个特殊用例：

除了这些功能差异外，Canvas还允许您检查和更改画布表面上的任何像素。特别是，这些有价值的像素信息让您可以使用图像执行一些不错的任务：

• 在像素级别重新着色图像的任何部分（如果使用HSL，您甚至可以在保留重要的光照和饱和度的同时重新着色图像，因此结果看起来不像是某人在图像上拍了一些油漆），
• “敲除”图像中人物/项目周围的背景，
• 检测并填充图像的一部分（例如，将用户点击的花瓣的颜色从绿色变为黄色 - 只需点击花瓣！），
• 做透视翘曲（例如在杯子的曲线周围包裹图像），
• 检查图像的内容（例如面部识别），
• 回答有关图像的问题：停车位的这张图片中是否有车停在哪里？
• 应用标准图像滤镜（灰度，棕褐色等）
• 应用您可以想象的任何奇特的图像滤镜（Sobel Edge Detection），
• 合并图像。如果亲爱的奶奶苏无法与家人团聚，只需将“photoshop”她带入团圆的形象。不喜欢表哥菲尔 - 只是“把他拉出来，
• 播放视频/从视频中抓取一帧，
• 将画布内容导出为.jpg | .png图像（您甚至可以选择裁剪或注释图像并将结果导出为新图像），
• 还有许多图像像素操作没有想到！

Answer 2

Canvas是pixel manipulation元素。

SVG是vector element container。

我觉得这两者之间的区别超出了StackOverflow的范围，因为它与计算机艺术基础有关，而不是编程，如果不是在WikiPedia中的搜索引擎中有很多可用的信息。例如，可以使用基于像素的媒体进行像素游戏。