HTML5实战——svg学习
百度百科:
SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。
什么是SVG?
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
Canvas 和 SVG 的区别:
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
特点:
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
特点:
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘
svg 例子:
<svg width="100%" height="100%" > <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" /> </svg>
学习svg非常不错的系列博文
突袭HTML5之SVG 2D入门13 - svg对决canvas
参考:http://www.w3school.com.cn/svg/svg_intro.asp
HTML5实战——svg学习的更多相关文章
- SVG学习笔录(一)
SVG可缩放矢量图形(Scalable Vector Graphics)这项技术,现在越来越让大家熟知,在h5的移动端应用使用也越来越广泛了, 下面让我分享给大家svg学习的经验. HTML体系中,最 ...
- HTML5实战与剖析之跨文档消息传递(iframe传递信息)
在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...
- [翻译svg教程]svg学习系列 开篇
目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...
- 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz
以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
- HTMl5/CSS3/Javascript 学习推荐资源
HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...
- (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5课程大纲/学习路线
HTML5课程大纲/学习路线 这是什么? 这个一个HTML技术路线的课程大纲/学习大纲. 你能用它做什么? 如果你是找工作的人, 利用本大纲, 你可以学习HTML5语言, 做一个HTML前端工程师, ...
随机推荐
- FPGA相关术语(一)
参考资料: 1. 数字时钟管理单元DCM 2. RS-232 知识点: ● Xilinx) Digital Clock Manager(DCM) primitive用于实现延迟锁相环(delay lo ...
- Quality assessment and quality control of NGS data
http://www.molecularevolution.org/resources/activities/QC_of_NGS_data_activity_new table of contents ...
- java练习题(字符串类):显示4位验证码、输出年月日、从XML中抓取信息
1.显示4位验证码 注:大小写字母.数字混合 public static void main(String[] args) { String s="abcdefghijklmnopqrstu ...
- PHP 小方法之 随机生成几位字符串
if(! function_exists ('get_rand_string') ) { function get_rand_string($len=6,$format='ALL') { switch ...
- 【Asp.net之旅】--数据绑定控件之Repeater
http://blog.csdn.net/zhang_xinxiu/article/details/21872433
- struts2学习:配置篇之namespace
把namespace单独拉出来讲一方面是因为它实际上不是一个element,而只是一个attribute,前面已经说了,它是package的一个attribute:另外一方面是因为这个属性是我接触St ...
- Openvpn 本地密码验证
1.修改配置文件.(添加下列配置) auth-user-pass-verify /etc/openvpn/checkpsw.sh via-env #开启用户密码脚本 client-cert-not-r ...
- 【bzoj1084】最大子矩阵
题意 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. \(1≤n≤100,1≤m≤2,1≤k≤10\) 分析 由于\(m\)只有两 ...
- while 和 for 对比
for 语句实例 本例中的循环使用 for 循环来显示 cars 数组中的所有值: cars=["BMW","Volvo","Saab",& ...
- 使用C语言将IE收藏夹生成HTML
IE收藏夹里收藏的链接很多,查找也不方便,使用C编写一个小工具,可以将收藏夹里的链接文件生成到一个HTML文件上. 源码还有许多地方需要优化,后续我会优化,先分享出来.目的主要是为了练习C语言,这个代 ...