html5 画布和SVG的差别
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的差别的更多相关文章
- html5 中的SVG 和canvas
想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...
- HTML5中的SVG
* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...
- HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/
- HTML5画布生成的3D飞船舰队效果
在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果
- 使用HTML5画布(canvas)生成阴影效果
来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...
- html5 Canvas和SVG的区别是什么(总结)
html5 Canvas和SVG的区别是什么(总结) 一.总结 一句话总结:都是2D做图,svg是矢量图,canvas是位图.Canvas 是逐像素进行渲染的,适合游戏. 1.svg的全称是什么? S ...
- HTML5: HTML5 内联 SVG
ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...
- html5中画布和SVG的比较
SVG是基于XML的图形语言,在DOM解析中其每个元素都是可以用的,这样就可以为SCG元素附加JavaScript事件处理器,实现更加丰富的效果. 在SVG中,每个被绘制的图形均被视为对象,如果SVG ...
- HTML5学习之画布和SVG(四)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
随机推荐
- 理解Vuex的辅助函数mapState, mapActions, mapMutations用法
在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的 ...
- NPOI DataTable导出excel
/// <summary> /// DataTable导出到Excel文件 /// </summary> /// <param name="dtSource&q ...
- [06] 利用mybatis-generator自动生成代码
1.mybatis-generator 概述 MyBatis官方提供了逆向工程 mybatis-generator,可以针对数据库表自动生成MyBatis执行所需要的代码(如Mapper.java.M ...
- 4.3《想成为黑客,不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)—链接到目录
在4.2章中我们已经会用cd进入到指定的目录中.这是导航最常见的用途之一,但是它还有几个值得关注的用途.第一个是使用cd ..(读作'see-dee 点点')返回当前目录级别的上一级: $ pwd / ...
- Vue与Element走过的坑。。。。带上Axios
1.Axios中post传参数组(java后端接收数组) 虽然源数据本身就是数组,但是传参时会自动变成key:数值或者服务器无法接收的对象,如下 如果不仔细看,很容易认为这两种情况没毛病..(后端不背 ...
- C# LINQ 详解 From Where Select Group Into OrderBy Let Join
目录 1. 概述 2. from子句 3. where子句 4. select子句 5. group子句 6. into子句 7. 排序子句 8. let子句 9. join子句 10. 小结 1. ...
- electron 开发实时加载
第一个方式 cnpm install electron-reload --save-dev cnpm install electron-prebuilt --save-dev require('ele ...
- [JDBC]ORA-01000: 超出打开游标的最大数(ORA-01000: maximum open cursors exceeded)
问题产生的原因: Java代码在执行conn.createStatement()和conn.prepareStatement()的时候,相当于在数据库中打开了一个cursor.由于oracle对打开的 ...
- SCP和Rsync远程拷贝的几个技巧
scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...
- ssh登陆服务器locale告警(-bash: warning: setlocale:)的处理方法
使用ssh远程登陆 IDC机房服务器,发现老是出现如下告警信息: -bash: warning: setlocale: LC_CTYPE: cannot change locale (en_US.UT ...