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 相关文章推荐
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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/02/15 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
js微信分享实现代码
2020/10/11 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
python黑魔法之参数传递
2016/02/12 Python
Python构建网页爬虫原理分析
2017/12/19 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
Python 线程池用法简单示例
2019/10/02 Python
如何将json数据转换为python数据
2020/09/04 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
印尼旅游网站:via
2017/11/12 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
军训自我鉴定范文
2014/02/13 职场文书
校园活动策划方案
2014/06/13 职场文书
机械专业求职信范文
2014/07/15 职场文书
文明社区申报材料
2014/08/21 职场文书
个人年终总结开头
2015/03/06 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2015年环卫工作总结
2015/04/28 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
秋季运动会加油词
2015/07/18 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
PHP中多字节字符串操作实例详解
2021/08/23 PHP
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL