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 事件处理器. 在 ...
随机推荐
- HTTP和RFC
RFC: Request For Comments(RFC),是一系列以编号排定的文件.文件收集了有关互联网相关信息,以及UNIX和互联网社区的软件文件.目前RFC文件是由Internet Socie ...
- LeakCanary监测内存泄漏的原理
监测机制利用了Java的WeakReference和ReferenceQueue,通过将Activity包装到WeakReference中,被WeakReference包装过的Activity对象如果 ...
- 20175204 张湲祯 2018-2019-2《Java程序设计》 第一周学习总结
20175204 张湲祯 2018-2019-2<Java程序设计>第一周学习总结 教材学习内容总结 -第一章Java入门要点: -Java的地位:具有面向对象,与平台无关,安全稳定和多线 ...
- 一个基于Net 的CMS -- Umbraco CMS
一个基于Net 的CMS -- Umbraco CMS: https://umbraco.com/ Sitecore 和 EPiServer http://www.bubuko.com/i ...
- 推荐一款中国风React组件
最近看这个中国风的组件在掘金也火了一段时间,看了有几天了,也体验了下,感觉还不错,所以准备来安利下 项目地址:https://github.com/zhui-team/zhui 使用手册请参考:htt ...
- 【easy】206. Reverse Linked List 链表反转
链表反转,一发成功~ /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; ...
- VMware的NAT网络模式
参考链接:https://www.cnblogs.com/linjiaxin/p/6476480.html 图例:
- 【原创】Linux基础之SSH秘钥登录
官方:https://www.ssh.com/ssh/ The SSH protocol uses encryption to secure the connection between a clie ...
- 20 常用模块 hashlib hmac:加密 xml xlrd xlwt:excel读|写 configparser subprocess
hashlib模块:加密 加密: 1.有解密的加密方式 2.无解密的加密方式:碰撞检查 hashlib -- 1)不同数据加密后的结果一定不一致 -- 2)相同数据的加密结果一定是一致的 import ...
- 【batch】命令对比两个文件夹下的文件（增删改的对比）
1.分别打印两个目录的结构 TREE D:\SOURCE /A /F >D:\SOURCE.TXT TREE D:\DEST /A /F >D:\DEST.TXT 2.然后使用工具/命令进 ...