美文网首页
svg与canvas的区别

svg与canvas的区别

作者: 昱蓉呀 | 来源:发表于2019-02-06 18:03 被阅读0次

........虽然尼  它俩都是用来绘制图形的 但是 还是各有优势哒!

首先 svg

  1.svg是一个使用XML描述2D图形的语言

  2.svg基于XML,这意味着svg DOM 中的每个元素都是可用的。您可以为某个元素附加javascript事件处理器。

在svg中,每个被绘制得图形均被视为对象。如果svg对象的属性发生变化,那么浏览器能自动重现图形。

特点:

  不依赖分辨率

  支持事件处理器

  最适合带有大型渲染区域的应用程序(比如谷歌地图)

  复杂度高会减慢渲染速度(任何过度使用DOM的应用都不快)

  不适合游戏应用

Canvas

  Canvas通过JavaScript来绘制2D图形。

  Canvas是逐像素进行渲染的。

  在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

特点:

      依赖分辨率

      不支持事件处理器

      弱的文本渲染能力

      能够以.jpg或.png格式保存结果图像

      最适合图像密集型的游戏,其中的许多对象会被频繁重绘

好啦!以上就是我的一些小小的总结。多多关照哦⊙∀⊙!

相关文章

  • H5 新特性05

    SVG svg与canvas的区别 canvas绘制的是位图, svg绘制的是矢量图 canvas使用Ja...

  • Echarts 3.0

    实例代码 1.浏览器画图原理 1.1 Canvas与Svg的区别 1.1.1 Canvas——01/canvas....

  • SVG简介及其用法

    一、SVG - 基础 1.什么是SVG 2.SVG的优势 3.SVG与canvas的区别 4.用途 5.svg再将...

  • svg

    一、SVG - 基础 1.svg简单介绍 2. SVG的优势 3. SVG与canvas的区别 4.用途 5.案例...

  • 无标题文章

    SVG svg和canvas的区别 svg绘制的是矢量图, canvas绘制的是位图 svg使用XML来绘制图片,...

  • HTML5新增API

    SVG 定义 矢量图工具, 绘图SVG在H5标准之前就有了, IE对SVG的兼容性非常好 svg与canvas区别...

  • SVG矢量图

    SVG 定义 矢量图工具, 绘图SVG在H5标准之前就有了, IE对SVG的兼容性非常好 svg与canvas区别...

  • 2019-08-28 canvas

    canvas和SVG的区别:canvas使用它提供的方法来绘图,绘图API简洁。SVG通过构建XML元素数绘图,对...

  • 常见面试题---网络相关及HTML篇(二)

    一、canvas和svg的区别 svg绘制出来的图形,每个元素都是一个dom节点,方便绑定事件和方法,canvas...

  • canvas与svg的区别

    Canvas 1) Canvas依赖分辨率SVG不依赖分辨率 2) Canvas不支持事件处理器,SVG支持事件处...

网友评论

      本文标题:svg与canvas的区别

      本文链接:https://www.haomeiwen.com/subject/fmdisqtx.html