h5 canvas与SVG的比较
画布
什么是canvas？
HTML5的canvas标签使用JavaScript可以在网页上绘制图像，画布为一个矩形。
画布本身没有绘制能力，只能通过脚本来绘制。
画布例子：
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas"); //必写的，获取对象
var ctx = canvas.getContext("2d"); //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
ctx.beginPath();
ctx.arc(250,250,200,0,2*Math.PI);
ctx.closePath();
ctx.strokeStyle = "aqua";
ctx.stroke();
</script>
效果图：
画布可以做的不止画圆，这里就不一一举例。
SVG
什么是SVG？
SVG指的是可伸缩矢量图，一种二维图形表示语言。
在老的版本，你学习svg之前，必须先要了解XML。
那什么是XML呢？
XML是可扩展标记语言（EXtensible Markup Language），XML的设计宗旨是传输数据而非显示数据，而且XML标签没有被预定义，因此您需要自行定义标签。
XML应用于web开发的许多方面，常用于简化数据的存储与共享。
在HTML5以前还的建一个后缀名为.svg的文件，然后导入
01.svg
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/> </svg>
<body>
<!--老版本的svg的用法-->
<iframe src="01.svg" width="300" height="100"></iframe>
</body>
效果如下：
而HTML5已经有了svg标签，就不用在导入了
<svg width="400px" height="400px">
<rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="10" />
<rect x="120" y="120" width="100" height="100" style="fill:green;stroke:red;stroke-width: 20;"/>
</svg>
效果如下：
两者的区别：
canvas(位图)：
1.h5新出来的东西
2. 依靠分辨率
3. 不支持事件处理器(整个画布为一个整体，不能为其中的一个图像做事件处理)
4. 弱的文本渲染能力
5. 能够以 .png 或 .jpg 格式保存结果图像
6. 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
svg(矢量图)：
1. 比较老了，不过现在HTML5中可以直接使用svg标签了
2. 不依赖分辨率
3. 支持事件处理器
4. 最适合带有大型渲染区域的应用程序（比如谷歌地图）
5. 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
6 .不适合游戏应用
h5 canvas与SVG的比较的更多相关文章
- H5 Canvas vs. SVG
HTML 5 Canvas vs. SVG HTML5 SVG HTML5 地理定位 Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XM ...
- canvas与svg特性和使用对比
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- canvas和svg的区别
讨论关于canvas和svg的区别.首先canvas是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初 ...
- 前端绘图方式Canvas和SVG的区别
Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片.下面来介绍和分析一下他们. 一.Canvas 和 SVG 简介 1.什么是Canvas? Canvas 是H5 ...
- HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
- h5 canvas 小球移动
h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- h5 canvas 画图
h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 【HTML5】Canvas和SVG的区别
* SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...
随机推荐
- 2017-12-19python全栈9期第四天第二节之列表的增删改查之切片
#!/user/bin/python# -*- coding:utf-8 -*-li = ['zd',[1,3,4,5,6],'ls','ww','zl']l1 = li[0]print(l1)l2 ...
- Python项目读取配置的几种方式
1. 将配置写在Python文件中 配置文件(config.py 或 settings.py) 通常放置在程序源代码的目录,方便引用 配置文件 # settings.py class Config(o ...
- tomcat 线程池
web server允许的最大线程连接数还受制于操作系统的内核参数设置,通常Windows是2000个左右,Linux是1000个左右. 1.编辑tomcat安装目录下的conf目录下的server. ...
- array_slice()函数造成的一次sql注入
HDwiki6.0 sql注入 下载连接http://kaiyuan.hoodong.com/download/ 漏洞出现在\control\edition.php的docompare()函数 !de ...
- LFYZ-OJ ID: 1015 统计数字（NOIP2007）
分析 本体思路很简单:读入数据,排序.统计.输出.难点在于数据量较大,选择何种排序方法就极为重要,否则很容易发生内存或时间超限.可以考虑以下几种思路: 桶排序 桶排序是可以想到的最简单方法,可在O(n ...
- JavaLinkedHashSet练习
题目三: 1.键盘录入一个字符串,去掉其中重复字符 2.打印出不同的那些字符,必须保证顺序.例如输入:aaaabbbcccddd,打印结果为:abcd.尝试用两种方法解决字符串删除问题,一是使用Has ...
- windows服务器基本管理及服务搭建
windows服务器基本管理及服务搭建 ****windows服务器系统版本:2000 2003 2008 2012 1.用户与组管理 用户:账户=账号/用户名+密码 每个账户有自己唯一的SID 账户 ...
- SpringBoot中Application开启与关闭
0.声明 缘由:没有学过或者没有经历SpringBoot的Application运行机制的话,一定会好奇,博主为啥会写一篇关闭开启的博文,是不是好幼稚?(/o(╥﹏╥)o),待我娓娓道来......为 ...
- Django ----- app 和 ORM的操作和介绍
创建APP ORM 介绍 ORM的操作 说明一下 GET 和 POST 的区别: , GET ①获取一个页面 ②提交数据 数据显示在URL ?user=alex&pwd=alexdsb ,PO ...
- nginx 配置身份验证 http_auth_basic_module
ngx_http_auth_basic_module模块实现访问必须输入用户名和密码 正确情况向访问,这为我们一些重要资源访问增添了一道安全锁. 语法: auth_basic_user_fil ...