本章给大家介绍html5中的canvas 和 svg分别是什么？它们的区别在何处？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、什么是canvas ？
canvas 是指定了长度和宽度的矩形画布，我们将使用新的html5 javascript，可使用html5 js api 来画出各种图形。不过，canvas本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
canvas 实例代码：创建画布，然后再画布上绘一个圆形
<!doctype html><html> <head> <meta charset="utf-8"> <title>canvas画布</title> <style type="text/css"> .demo{ width: 500px; height: 150px; margin: auto; } </style> </head> <body> <div class="demo"> <!--添加canvas便签，创建画布--> <canvas id="mycanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 html5 canvas 标签。 </canvas> </div> </body> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); ctx.beginpath(); ctx.arc(95,50,40,0,2*math.pi); ctx.stroke(); </script></html>
效果图：
二、什么是svg ？
svg可缩放矢量图形（scalable vector graphics）是基于可扩展标记语言（xml），用于描述二维矢量图形的一种图形格式。svg是w3c制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。svg严格遵从xml语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
我们可以简要概括一下svg：
svg 指可伸缩矢量图形 (scalable vector graphics)
svg 用来定义用于网络的基于矢量的图形
svg 使用 xml 格式定义图形
svg 图像在放大或改变尺寸的情况下其图形质量不会有所损失
svg 是万维网联盟的标准
svg 与诸如 dom 和 xsl 之类的 w3c 标准是一个整体
svg实例代码：
<!doctype html><html> <head> <meta charset="utf-8"> <title>svg</title> <style type="text/css"> .demo{ width: 500px; height: 150px; margin: auto; } </style> </head> <body> <div class="demo"> <svg width="100%" height="100%" > <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" /> </svg> </div> </body></html>
效果图：
三、canvas 和 svg的区别
svg
svg 是一种使用 xml 描述 2d 图形的语言。
svg 基于 xml，这意味着 svg dom 中的每个元素都是可用的。您可以为某个元素附加 javascript 事件处理器。
在 svg 中，每个被绘制的图形均被视为对象。如果 svg 对象的属性发生变化，那么浏览器能够自动重现图形。
特点：
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 dom 的应用都不快）
不适合游戏应用
canvas
canvas 通过 javascript 来绘制 2d 图形。
canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
特点：
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
以上就是html5中的canvas 和 svg分别是什么？它们的区别在何处？（实例）的详细内容。