html canvas svg,html中的svg

　　至此，已经总结了SVG和Canvas的主要特性。它们都是HTML5支持的2D图形显示技术，并且都支持矢量图形。现在，我们来对比一下这两种技术，分析一下各自的优势和适用场景。

　　首先，分析这两种技术的显著特征，并查看下表：

　　Canvas SVG是基于像素的(动态。png)基于形状的单个HTML元素多个图形元素，它们成为DOM的一部分。只能通过脚本修改。通过脚本和CSS修改事件模型/用户交互粒化(x，y)事件模型/用户交互抽象(rect，Path)当表面较小且对象数量较大(10k)(或两者都有)时性能较好，当对象数量较小(10k)且表面较大(或两者都有)时性能较好。从上面的对比可以看出，Canvas在像素操作上有很强的优势；SVG最大的优势在于方便的交互性和可操作性。Canvas受canvas大小(实际上是像素数量)影响很大，而SVG受对象数量(元素数量)影响很大。Canvas和SVG在修改方法上还是有区别的。在绘制画布对象后，不能使用脚本和CSS修改它。SVG对象是文档对象模型的一部分，因此您可以使用脚本和CSS随时修改它们。

　　实际上，Canvas是一个基于像素的实时图形系统。绘制对象后，它不会保存在内存中。当你再次需要这个对象时，你需要重画它。SVG是一个基于形状的图形系统，具有保留模式。在绘制一个对象后，它将被保存在内存中。当你需要修改这个对象的信息时，直接修改就可以了。这一根本差异导致了许多不同的应用场景。

　　我们也可以在下面的常见应用中认识到这一点。高保真的文档这方面很好理解。为了浏览文档，缩放不失真，或者打印高质量的文档，通常首选SVG，比如地图服务。静态的图片资源SVG常用于简单的图像，无论是应用还是网页，大图还是小图。因为SVG必须加载到DOM中，或者至少在创建图像之前进行解析，所以性能会略有下降，但与渲染一个网页的成本(大约几毫秒)相比，这种效率损失是极小的。

　　在文件大小方面(出于评估网络流量的目的)，SVG图像和png图像没有太大区别。但是因为SVG作为一种图像格式是可伸缩的，所以如果开发人员想要在更大的范围内使用图像，或者用户使用高DPI屏幕，它是一个相当好的选择。

　　像素操作使用Canvas时，可以获得较快的绘制速度，不需要保留元素的对应信息。尤其是需要处理像素操作时，性能更佳。这类应用基本选择Canvas技术。实时数据Canvas非常适合非交互式实时数据可视化。例如实时天气数据。图表和图形你可以使用SVG或者Canvas来绘制相关的图形和图表，但是如果要强调可操作性，SVG无疑是最好的选择。如果不需要交互性，强调性能，Canvas更适合。二维游戏因为大部分游戏都是用低级API开发的，Canvas更容易接受。但实际上在绘制游戏场景时，Canvas需要反复绘制和定位形状，而SVG是在内存中维护的，所以修改相关属性非常容易，所以SVG也是一个不错的选择。

　　在一个小游戏板上创建几个对象的游戏时，Canvas和SVG的性能几乎没有区别。但是，随着更多对象的创建，画布代码会增加很多。因为每次玩游戏循环都要重画画布对象，所以画布游戏的速度会变慢。用户界面设计因为交互性好，SVG无疑更胜一筹。使用SVG的保留模式图形显示，您可以用类似HTML的文本标记创建所有用户界面细节。因为每个SVG元素和子元素都可以响应单独的事件，所以您可以非常容易地创建复杂的用户界面。Canvas要求您指定如何在更复杂的代码序列中创建用户界面的每个部分。你需要遵循的顺序是：

　　获取上下文。

　　开始画画。

　　指定每条线和每种填充的颜色。

　　定义形状。

　　完成绘制。

　　另外，canvas只能处理整个Canvas的事件。如果您有一个更复杂的用户界面，您必须确定画布上单击位置的坐标。SVG可以单独处理每个子元素的事件。

　　下面两个例子分别说明了canvas和svg的技术优势：

　　canvas的典型应用如绿屏:http://samples . msdn . Microsoft . com/workshop/samples/graphics inhtml 5/canvas green screen . htm

　　效果图如下：

　　打开页面后可以查看页面源代码。

　　这个应用程序从两个视频中读取像素并写入另一个视频。该代码使用了两个视频、两个画布和一个最终画布。在视频上一次捕捉一帧，然后在两个独立的画布上绘制，这样可以回读数据：复制代码代码如下：

　　ctxSource1.drawImage(video1，0，0，videoWidth，video height)；

　　ctxSource2.drawImage(video2，0，0，videoWidth，video height)；

　　因此，下一步是检索每个绘制图像的数据，以便可以检查每个单独的像素：复制代码，如下所示：

　　currentframesource 1=CTX source 1 . getimagedata(0，0，videoWidth，video height)；

　　currentframesource 2=CTX source 2 . getimagedata(0，0，videoWidth，video height)；

　　获取后，代码会浏览绿屏的像素数组，搜索绿色像素。如果找到，代码将使用背景场景中的绿色像素替换所有绿色像素。复制代码代码，如下所示：

　　for(var I=0；I n；我)

　　{

　　//获取每个像素的RBG:

　　r=currentframesource 1 . data[I * 4 0]；

　　g=currentframesource 1 . data[I * 4 1]；

　　b=currentframesource 1 . data[I * 4 2]；

　　//如果这看起来像绿色像素，请将其替换：

　　if((r=0 r=59)(g=74g=144)(b=0 b=56))//Target green是(24，109，21)，所以看看周围那些值。

　　{

　　pixel index=I * 4；

　　current frame source 1 . data[pixel index]=current frame source 2 . data[pixel index]；

　　currentframesource 1 . data[pixel index 1]=currentframesource 2 . data[pixel index 1]；

　　currentframesource 1 . data[pixel index 2]=currentframesource 2 . data[pixel index 2]；

　　currentframesource 1 . data[pixel index 3]=currentframesource 2 . data[pixel index 3]；

　　}

　　}

　　最后将像素数组写入目标画布：复制代码代码如下：

　　CTX dest . putimagedata(currentframesource 1，0，0)；svg典型的应用如用户界面:按如下方式复制代码：

　　！声明文档类型

　　超文本标记语言

　　头

　　脚本类型=文本/javascript

　　//点击圆时调用此函数。

　　函数clickMe() {

　　//显示警报。

　　alert(您单击了SVG UI元素。);

　　}

　　/脚本

　　/头

　　身体

　　氕

　　SVG用户界面

　　/h1

　　！-创建SVG窗格。-

　　svg高度=200 宽度=200

　　！-创造一个圆圈。-

　　circle CX= 100 cy= 100 r= 50 fill= gold id= ui element onclick= click me()；

　　/

　　/svg

　　p

　　单击金色圆形用户界面元素。

　　/p

　　/body

　　/html

　　虽然这个例子很简单，但是它拥有用户界面的所有特性。从这个例子中，我们可以再次体会到svg的便捷交互。

　　用最后一个图总结适合每个应用的技术。图中的每个方块代表一类应用，越靠近一端，采用这项技术的优势就越大：

　　实用参考：

　　脚本索引：http://msdn。微软。com/zh-cn/library/ff 971910(v=vs . 85).文件

　　开发中心：https://开发者。Mozilla。组织/环境/服务

　　热门参考：http://www.chinasvg.com/

　　官方文档：http://www.w3.org/TR/SVG11/

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。