• 售前

  • 售后

热门帖子
入门百科

HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析

[复制链接]
老跃1 显示全部楼层 发表于 2021-10-25 19:11:02 |阅读模式 打印 上一主题 下一主题
到现在为止,SVG与Canvas的重要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技能,而且均支持向量图形。现在,我们就来比对一下这两种技能,分析一下它们的优点和适用场景。
首先分析一下两种技能的显著特点,看下面的表格:
            Canvas            SVG                            基于像素(动态 .png)            基于外形                            单个 HTML 元素            多个图形元素,这些元素成为 DOM 的一部门                            仅通过脚本修改            通过脚本和 CSS 修改                            事故模子/用户交互颗粒化 (x,y)            事故模子/用户交互抽象化 (rect, path)                            图面较小时、对象数量较大 (>10k)(或同时满足这二者)时性能更佳            对象数量较小 (<10k)、图面更大(或同时满足这二者)时性能更佳        从上面的对比中可以看出:Canvas在像素利用方面有着强大的优势;而SVG的最大优势在于便捷的交互性和可利用性。利用Canvas受画布的尺寸(实在就是像素数量)影响很大,利用SVG受对象的数量(元素的数量)影响比力大。Canvas 和 SVG 在修改方式上还存在着差异。绘制 Canvas 对象后,不能利用脚本和 CSS 对它举行修改。而 SVG 对象是文档对象模子的一部门,以是可以随时利用脚本和 CSS 修改它们。
实际上Canvas 是基于像素的即时模式图形系统,绘制完对象后不生存对象到内存中,当再次须要这个对象时想,须要重新绘制;SVG 是基于外形的保存模式图形系统,绘制完对象后会将其生存在内存中,当须要修改这个对象信息时,直接修改就可以了。这种根本的区别导致了许多应用场景的差异。

在下面的几个常见应用中,我们也可以领会到这一点。
高保真的文档
这个方面很好明白,为了欣赏文档时,缩放时不失真,或须要打印高质量的文档,通常会优先选择SVG,比方舆图服务。
静态的图片资源
SVG经常用于简朴图像,无论是应用步调还是网页中的图像,大图像还是小图像。由于SVG要加载到DOM中,或者创建图像前至少要举行解析,以是性能会稍微有所下降,但相比于呈现网页的成本(约莫几毫秒),这种服从丧失是极其微小。
在文件大小方面(为了评估网络流量的目标),SVG图片与png图片大小相差也不大。但是由于SVG作为图像格式是可缩放的,以是如果开辟人员想要以更大的比例利用该图像,或者用户利用高 DPI的屏幕,则利用SVG是相当不错的选择。
像素利用
利用Canvas时可以得到快速的绘图速率,且不须要保存元素的相应信息。特别是当须要处理像素利用时,性能较好。这种范例的应用基本都选择Canvas技能。
实时数据
Canvas非常恰当非交互的实时数据可视化。好比实时天气数据。
图表和图形
利用SVG或者Canvas均可以绘制干系图形和图表,但是如果要夸大可利用性,则SVG无疑是最好选择,如果不须要交互性,夸大性能,则Canvas比力恰当。
二维游戏
由于游戏大多数是利用低级的API开辟,以是Canvas比力容易让人接受。但是实际上,绘制游戏的场景的时间,Canvas须要重复绘制和定位外形,而SVG是维护在内存中,修改干系的属性非常容易,以是SVG也是一种不错的选择。
在小游戏板上利用几个对象创建游戏时,Canvas 和 SVG 之间在性能上险些没有差异。但是,随着创建更多的对象,Canvas 代码将会增大许多。由于每次举行游戏循环时都必须重新绘制 Canvas 对象,因此 Canvas 游戏的速率会减慢。
用户界面计划
由于精良的交互性,无疑SVG更胜一筹。利用 SVG 的保存模式图形显示,你可以在正文的雷同 HTML 的标志中创建所有效户界面具体信息。由于每个 SVG 元素和子元素都可以相应单独的事故,以是你可以非常轻松地创建复杂的用户界面。而 Canvas 须要你按照更复杂的代码次序来指定怎样创建用户界面的每个部门。你须要遵照的次序是:
•获取上下文。
•开始绘制。
•指定每根线条和每个填充的颜色。
•定义外形。
•完成绘制。
此外,Canvas 只能处理整个画布的事故。如果有更复杂的用户界面,则必须确定在画布上单击的位置的坐标。SVG 可以单独处理每个子元素的事故。
下面两个例子分别说明了canvas与svg各自的技能优势:
canvas的范例应用如绿屏:http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasgreenscreen.htm
效果图如下:

打开页面以后可以查看页面源代码。
这个应用是从两个视频中读写像素到另一个视频中,代码利用两个视频、两个画布和一个最终画布。一次捕捉视频上的一帧,然后绘制到两个单独的画布上,如许允许读回数据:

复制代码代码如下:
ctxSource1.drawImage(video1, 0, 0, videoWidth, videoHeight);
ctxSource2.drawImage(video2, 0, 0, videoWidth, videoHeight);

因此,下一步是检索每个绘制图像的数据,以便可以检查每个单独的像素:

复制代码代码如下:
currentFrameSource1 = ctxSource1.getImageData(0, 0, videoWidth, videoHeight);
currentFrameSource2 = ctxSource2.getImageData(0, 0, videoWidth, videoHeight);

获取后,代码将欣赏绿屏的像素数组,搜索绿色像素,如果找到,代码将用背景场景中的像素更换所有绿色像素。:

复制代码代码如下:
for (var i = 0; i < n; i++)
{
  // Grab the RBG for each pixel:
  r = currentFrameSource1.data[i * 4 + 0];
  g = currentFrameSource1.data[i * 4 + 1];
  b = currentFrameSource1.data[i * 4 + 2];
  
  // If this seems like a green pixel replace it:
  if ( (r >= 0 && r <= 59) && (g >= 74 && g <= 144) && (b >= 0 && b <= 56) ) // Target green is (24, 109, 21), so look around those values.
  {
    pixelIndex = i * 4;
    currentFrameSource1.data[pixelIndex] = currentFrameSource2.data[pixelIndex];
    currentFrameSource1.data[pixelIndex + 1] = currentFrameSource2.data[pixelIndex + 1];
    currentFrameSource1.data[pixelIndex + 2] = currentFrameSource2.data[pixelIndex + 2];
    currentFrameSource1.data[pixelIndex + 3] = currentFrameSource2.data[pixelIndex + 3];
  }
}

最后,像素数组将写入到目标画布中:

复制代码代码如下:
ctxDest.putImageData(currentFrameSource1, 0, 0);

svg范例的应用如用户界面

复制代码代码如下:
<!DOCTYPE html>
<html>
  
  <head>
    <script type="text/javascript">
      // This function is called when the circle is clicked.
      function clickMe() {
        // Display the alert.
        alert("You clicked the SVG UI element.");
      }
    </script>
  </head>
  <body>
    <h1>
      SVG User Interface
    </h1>
    <!-- Create the SVG pane. -->
    <svg height="200" width="200">
      <!-- Create the circle. -->
      <circle cx="100" cy="100" r="50" fill="gold" id="uIElement"
      />
    </svg>
    <p>
      Click on the gold circular user interface element.
    </p>
  </body>
</html>

这个例子固然简朴,但是具备了用户界面的统统特性,从这个例子中我们再次明白了svg便捷的交互性。
最后用一幅图来总结一下每种应用恰当的技能,图中每个方块代表一类应用,越靠近某一端,说明采用该技能越具有的优势:

实用参考:
脚本索引:http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开辟中央:https://developer.mozilla.org/en/SVG
热门参考:http://www.chinasvg.com/
官方文档:http://www.w3.org/TR/SVG11/

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作