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分别是什么？它们的区别在何处？（实例）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！