canvas和SVG可以在浏览器绘制图形,但是本质上是不同的。canves是绘制2d图象,SVG也是绘制2d图象。

Canvas是Javascript进行绘图的,是逐像素绘图。Canvas一旦图象绘制完成,就于浏览器无关了,图象的位置发生变化,整个场景都需要重新重新绘制,包括已经被覆盖的元素。

svg是使用xml绘制,可以为svg添加javascript的事件处理器。所有的DOM都是可用的,属性发生变化,浏览器会自动重新绘制。

SVG和Canvas的不同:

svg支持事件处理器,而Canvas不支持;

svg是通过XML定义的,而Canvas是通过javascript定义的。

Canvas可以保存为png或者jpg格式;

Canvas适合游戏场景绘图,很多对象需要频繁重绘,而SVG不适合游戏场景绘图;

Canvas支持分辨率,SVG不支持分辨率;

Canvas弱文本渲染能力,SVG适合带有大型渲染区域的应用程序;

SVG复杂度高会减慢绘图速度。

html5 画布和SVG的差别的更多相关文章

  1. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

  2. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  3. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  4. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  5. 使用HTML5画布(canvas)生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  6. html5 Canvas和SVG的区别是什么(总结)

    html5 Canvas和SVG的区别是什么(总结) 一.总结 一句话总结:都是2D做图,svg是矢量图,canvas是位图.Canvas 是逐像素进行渲染的,适合游戏. 1.svg的全称是什么? S ...

  7. HTML5: HTML5 内联 SVG

    ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...

  8. html5中画布和SVG的比较

    SVG是基于XML的图形语言,在DOM解析中其每个元素都是可以用的,这样就可以为SCG元素附加JavaScript事件处理器,实现更加丰富的效果. 在SVG中,每个被绘制的图形均被视为对象,如果SVG ...

  9. HTML5学习之画布和SVG(四)

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. AI 支持向量机

    支持向量机(Support Vector Machine,简称SVM),属于监督学习. 核技巧(kernel trick) 名字很吓人,乍一听完全不懂什么意思,但其实它的名字是很有意义的. 1)首先, ...

  2. Zephyr的Power Management

    1 关于Zephyr Zephyr是Linux基金会维护的微内核项目,来源于WindRiver向Zephyr捐赠的Rocket RTOS内核.主要用于开发针对物联网设备的实时操作系统. Zephyr操 ...

  3. 解决微软surface pro在某些情况下wifi转输速度过慢的问题 - z

    我是新款i7 surface.昨天到的货,狗东. 在公司使用的时候网络很正常,但回到家里之后就特别卡.5G频段也特别卡,基本处于无法观看视频的地步.台式电脑(我台式用的无线网卡)和手机都没问题. 于是 ...

  4. 【iOS】build diff: /../Podfile.lock: No such file or directory

    Github 上下载的开源项目,在 Xcode 打开运行后报了错,如图所示: 解决方法: 在工程设置中的 Build Phases 下删除 Check Pods Manifest.lock 及 Cop ...

  5. 【转】JS中,中国标准时间转化为yyyy-MM-dd

    'Thu May 12 2016 08:00:00 GMT+0800 (中国标准时间)'--此格式日期无法传到java后台,须格式化,方法如下 var d = new Date('Thu May 12 ...

  6. Linux常用命令行

    实时查看日志runtime.log最后100行 tail -f -n 100 runtime.log

  7. Flutter - 本地化启动列表中App名字

    上一篇讲了 Flutter - 本地化语言 但是这还有一点小欠缺,就是启动器中的App名字还是无法本地化. 比如英文系统中Play Store,在中文手机中就会显示Play 商店 那么为了解决这个问题 ...

  8. 懒人小工具1:winform自动生成Model,Insert,Select,Delete以及导出Excel的方法

       懒人小工具2:T4自动生成Model,Insert,Select,Delete以及导出Excel的方法    github地址:https://github.com/Jimmey-Jiang/J ...

  9. testNG-失败用例重跑方法探究

    实现IRetryAnalyzer类,重写其中的retry方法public class TestNGRetry implements IRetryAnalyzer { private int retry ...

  10. Error【0007】:zabbix中因为curl版本过低而无法发送邮件

    1. 错误背景 在centos6.5上,源码部署zabbix最新版本zabbix-3.2.14.部署后之后,在配置邮件发送报警时出错 2. 错误提示 3. 原因分析 从网上检索的结果是说,系统中的cu ...