画布

什么是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的比较的更多相关文章

  1. H5 Canvas vs. SVG

    HTML 5 Canvas vs. SVG HTML5 SVG HTML5 地理定位 Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XM ...

  2. canvas与svg特性和使用对比

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  3. canvas和svg的区别

    讨论关于canvas和svg的区别.首先canvas是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初 ...

  4. 前端绘图方式Canvas和SVG的区别

    Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片.下面来介绍和分析一下他们. 一.Canvas 和 SVG 简介 1.什么是Canvas? Canvas 是H5 ...

  5. HTML5新特性——HTML 5 Canvas vs. SVG

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  6. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  7. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  9. 【HTML5】Canvas和SVG的区别

    * SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...

随机推荐

  1. kubernetes云平台管理实战： pod资源共享（三）

    一.共享容器IP地址 1.查看容器进程 [root@k8s-node1 ~]# docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS ...

  2. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  3. PHP7 学习笔记（十七）变量函数 - unset

    https://secure.php.net/manual/zh/function.unset.php unset()函数用来清除.销毁变量,不用的变量,可以用unset()将它销毁. 1.unset ...

  4. 第三节：Action向View传值的四种方式(ViewData、ViewBag、TempData、Model)

    简  介 在前面的章节中,我们已经很清楚,MVC工作模型的流程,Controller中的Action接收到客户端的请求,处理后要将数据返回给View,那么Action中是如何将数据返回给View的,二 ...

  5. django - 总结 - cnblog

    1.头像预览 -------方法1-------- 点击头像------>点击input img和input重合; img在label,input-->display:none $(&qu ...

  6. 使用 https://git.io 缩短 a GitHub.com URL.

    curl -i https://git.io -F 'url=https://develon2015.github.io' -F 'code=develon' 现在点击 http://git.io/d ...

  7. JAVA传递带有空格的参数

    String s="b2 + b1"; Process child = Runtime.getRuntime().exec("C:\\eclipse-workspace\ ...

  8. MySQL的一些基本命令笔记(3)

    指明外键: 1 :1 两个表中的主键都可以当成外键 1 :N 在 "多" 的实体表中新增加一个字段,该字段是 "一" 实体表的主键 M : N 拆成两个1 :N ...

  9. 学习python笔记 协程

    下面将一个经典的消费者和生产者的案例进行分析: import time def consumer(): r = '' while True: n = yield r if not n: return ...

  10. 【js课设】电子画板01

    这学期web开发课的课设选了电子画板课题.(人家本来想做富文本编辑器的嘛然鹅老师在第二版里把这题删掉了｡ﾟヽ(ﾟ´Д`)ﾉﾟ｡) 主要考虑的有[界面美观][画笔类型][画布分层]这三个点了. [界面美 ...