Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用
HTML5新特性-- -定时器
一.定时器:一次性定时器/周期性定时器 #requestAnimationFrame 智能定时器 #此定时器主要使用范围:动画和游戏中 特点: setTimeout(fn,500); setInter ...
html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
HTML5新特性--svg-echarts(重点)-拖动API-WebWorker
一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线
HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. 同时字符集声明也被简化了:
web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
随机推荐
你真的熟悉background吗？
一两个月没更新博客了,因为放假刚在深圳找了实习,一直都比较忙碌,不过我觉得再忙,还是需要时间去沉淀一些东西,工作的时候别人看到的只是你有没有实现最终的结果,但自己是否思考,是否去总结,决定着你工作是否 ...
CSS实现打字效果
.print{ width:250px; white-space:nowrap; overflow:hidden; -webkit-animation: dy 3s steps(60, end) in ...
ThinkPHP3.2.3 Nginx 下 URL_MODEL 的配置
ThinkPHP3.2.3 的 URL_MODEL 包括普通模式(0).PATHINFO 模式(1).REWRITE 模式(2).兼容模式(3)等 4 种 URL 模式.在 Apache 下只要在配置 ...
Android--保持加速度传感器在屏幕关闭后运行
由于写论文需要,需要用手机加速度采集数据,关于android加速度传感器的介绍网上一抓一大把,但大多都是大同小异,跟官网文档差不多.自己写了个取加速度传感器的APK,发现数据有点不对劲,原理屏幕一关后 ...
jfinal对象封装Record原理
/*DbPro.class*/ public transient Record findFirst(String sql, Object paras[]{ List result = find(sql ...
入门命令13-字符串查找增强:findstr
/doupip/archive//12/23/2299210.html 在文件中寻找字符串. FINDSTR [/B] [/E] [/L] [/R] ...
Creating a Navigation Drawer 创建一个导航侧边栏
The navigation drawer is a panel that displays the app’s main navigation options on the left edge of ...
SQL如何查询两个表的数据
在进行查询操作时,我们通常需要查询两个关联表的数据,我们可以使用where语句进行查询,如: select Emp.E_Id,Company.C_OraName from Emp,Company wh ...
css3选择器总结--强大如jquery
最近发现,阿里的笔试考了许多css3的知识,像query media.box-flex等等.主要是移动浏览器的开发,让html5和css3如虎添翼,再也不用担心兼容了.so总结一下css3的选择器: ...
forget word out4
1★ be 使~ 成为: 2★ bene bene 3★ bi 2,两个,双重 4★ by 在~ 旁边,副的
