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 事件处理器. 在 ...
随机推荐
- 在CentOS 上搭建nginx来部署静态页面网站
在centOs 上搭建nginx来部署静态页面网站 一.部署服务器环境 nginx:轻量级.高性能的HTTP及反向代理服务器,占用内存少,并发能力强,相比老牌的apache作为web服务器,性能更加卓 ...
- MySQL实战45讲学习笔记：事务隔离级别（第三讲）
一.隔离性与隔离级别 1.事务的特性 原子性 一致性 隔离性 持久性 2.不同事务隔离级别的区别 读未提交:别人改数据的事务尚未提交,我在我的事务中也能读到.读已提交:别人改数据的事务已经提交,我在我 ...
- 14、使用csv和excel存储豆瓣top250电影信息
记得我们第三关的时候爬取了豆瓣TOP250的电影名/评分/推荐语/链接,现在呢,我们要把它们存储下来,记得用今天课上学的csv和excel,分别存储下来哦- URL htt ...
- SpringBoot系列: Pebble模板引擎
===============================Java 模板引擎选择===============================SpringBoot Starter项目向导中可选的J ...
- SpringBoot系列: 使用 Swagger 生成 API 文档
SpringBoot非常适合开发 Restful API程序, 我们都知道为API文档非常重要, 但要维护好难度也很大, 原因有: 1. API文档如何能被方便地找到? 以文件的形式编写API文档都有 ...
- 设计模式三: 代理模式(Proxy) -- JDK的实现方式
简介 代理模式属于行为型模式的一种, 控制对其他对象的访问, 起到中介作用. 代理模式核心角色: 真实角色,代理角色; 按实现方式不同分为静态代理和动态代理两种; 意图 控制对其它对象的访问. 类图 ...
- rocketmq 4.2.0集群配置
采用的是2m-2s-async模式 1. 修改每台机器的/etc/hosts 文件,增加如下内容 192.168.1.100 nameserver1192.168.1.102 nameserver ...
- O2O、B2B、C2C（通俗讲解）
你在地摊买东西,C2C你去超市买东西,B2C超市找经销商进货,B2B超市出租柜台给经销商卖东西,B2B2C你在网上下载个优惠券去KFC消费,O2O 一:O2O 1.概念: O2O即Online To ...
- ASP.NET Web API系列教程（目录）(转)
注:微软随ASP.NET MVC 4一起还发布了一个框架,叫做ASP.NET Web API.这是一个用来在.NET平台上建立HTTP服务的Web API框架,是微软的又一项令人振奋的技术.目前,国内 ...
- yum安装mysql
安装 CentOS7默认数据库是mariadb,配置等用着不习惯,因此决定改成mysql,但是CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源 ...