HTML5中Canvas与SVG的画图原理比较


Posted in HTML / CSS onJanuary 16, 2013

canvas 与 SVG都能够使你在浏览器中画图,但它们的基本原理不同。
SVG
SVG是一种在XML中描述二维图形的语言。
SVG是基于XML的,意味着在SVG DOM内每一个元素都是可用的。你可以为每一个元素增加JS事件处理器。
在SVG中,每一个图形被记作一个对象。如果一个SVG对象的属性发生改变,浏览器可以自动重新生成图形。

Canvas
Canvas能够在fly上画2D图形(使用JS)
Canvas能够按照像素重新生成。

在Canvas中,一旦图形完成,就会被浏览器忘记。如果图形位置要发生改变,那么整个屏幕需要重画,包括图形覆盖的对象。

Canvas 和SVG的比较
下表显示了canvas与SVG的主要不同点:

Canvas          SVG
依赖分辨率      独立于分辨率
不支持事件处理器 支持事件处理器
弱文本渲染能力 最适合具有大渲染面积的应用(谷歌地图)
可以保存最终图片为PNG或者JPG 复杂图像,重画变慢(任何使用DOM很多的情况都会变慢)
最适合许多 对象频繁重画的图形游戏        不适合游戏应用
HTML / CSS 相关文章推荐
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 #HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 #HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 #HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 #HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 #HTML / CSS
You might like
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
php自动加载的两种实现方法
2010/06/21 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python图片验证码生成代码
2016/07/02 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
快速了解Python中的装饰器
2018/01/11 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
python中pyplot基础图标函数整理
2020/11/10 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
酒店保安领班职务说明书
2014/03/04 职场文书
高三毕业寄语
2014/04/10 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
工人先锋号申报材料
2014/12/29 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
python3操作redis实现List列表实例
2021/08/04 Python