学习html5时都会碰到svg和canvas，这两个都可以在浏览器中绘制图形，那么这两个有什么区别呢。下面对两者进行比较。
SVG介绍
SVG（Scable vector Graphics 可缩放矢量图形）
是一种使用XML来描述2D图形的语言；
因为是基于XML，那么svg DOM中的每一个元素都可以，绑定上javascript事件处理器；
在svg中每一个绘制的图形都被视为对象，svg元素的属性发生变化那么浏览器也会重新渲染图形的。
注意：
1、SVG并不属于html5专有内容，在html5之前就有SVG。
2、SVG文件的扩展名是".svg"。
3、SVG绘制的图像在图片质量不下降的情况下被放大。
4、SVG图像经常在网页中制作小图标和一些动态效果图。
使用
在html5中使用svg必须使用<svg></svg>标签。（svg绘制所有的图形必须都要在<svg></svg>中绘制）。
<svg></svg>形成的区域大小为300px*150px
1、绘制矩形
<svg style="background:pink;width:400px;height:400px">
<reac x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-weight="5"/>
</svg>
其中svg标签里的style是svg的属性，不是css属性。
2、绘制圆形
<svg>
<circle cx="" cy="" r=""/>
</svg>
cx和cy表示圆心的坐标，r表示圆的半径
3、绘制椭圆
<svg>
<ellipse cx="" cy="" rx="" ry=""/>
</svg>
cx和cy表示椭圆的中心，rx和ry表示椭圆的长轴和短轴。
4、绘制直线
<svg>
<line x1="" y1="" x2="" y2="" />
</svg>
x1和y1表示起始点的坐标，x2,y2终止点的坐标。
5、绘制折线
<svg>
<polyline points="10,10 200,10 200,200 10,200 " stroke-width="5" stroke="black" />
</svg>
6、绘制多边形
<svg>
<polyline points="10,10 200,10 200,200 10,200 10,10" stroke-width="5" stroke="black" fill="white"/>
</svg>
特殊元素
渐变，渐变元素定义在<defs></defs>标签内
1、线性渐变
<linearGradient>标签
<svg width="400px" height="400px">
<defs>
<linearGradient id="mygrad" x1="0" y1="0" x2="100%",y2="100%">
<stop offset="0" stop-color="red"/>
<stop offest="50%" stop-color="green">
<stop offest="100%" stop-color="blue">
</linearGrdient>
</defs>
<react x="0" y="0" width="400" height="400" fill="url(#mygrad)"/>
</svg>
注意linearGradient的id和react的填充地址。
2、扇形渐变
<radialGradient>,使用方式同上
3、滤镜（高斯模糊）
<feGaussianBlur>,高斯模糊是滤镜的一种特殊使用方式
<svg width="500px" heihgt="600px">
<defs>
<filter id="myfilter">
<feGaussianBlur in="sourceGraphics" stdDeviation=5/>
<filter>
</defs>
<react x="0" y="0" width="400" height="400" fill="url(#myfilter)"/>
</svg>
其中in=“sourceGraphics”是固定写法，stdDeviation=5用来设置模糊程度。
Canvas介绍
Canvas是通过javascript来绘制2D图像的；
Canvas是逐像素进行渲染的；
在Canvas中一旦图形被绘制完成，它就不会得到浏览器的关注，一旦其位置发生变化，那么整个场景需要重新绘制，包括任何已被该图形覆盖了的图形。
使用
canvas使用javascript在网页上绘制图像，本身并没有绘制能力。
canvas是一个矩形区域可以控制其中的每一个元素。
canvas具有多种绘制路径、圆形、矩形、字符以及图像的方法。
下面是典型的常用的绘图方式。
1、填充画布
<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #333">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ct=c.getContext("2d");
ct.fillStyle="#ccc";
ct.fillRect(5,10,150,10);
</script>
getContext("2d")是内建的html5对象，拥有多种绘制路径，矩形，圆形，字符和图像的方法。
设计fillStyle属性可以是css颜色、渐变或图案，fillStyle的默认值是“#000000”。
2、canvas中的路径
在canvas中画线我们将使用两种方法:
moveTo(x,y)路径开始的坐标
lineTo(x,y)路径结束的坐标
stroke();绘制
<canvas id="myCanvas" width="200px" height="100px" style="1px solid #333">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ct=c.getContext("2d");
ct.moveTo(0,0);
ct.lineTo(50,50);
ct.stroke();
</script>
3、canvas中绘制圆
<canvas id="myCanvas" width="200px" height="100px" style="1px solid #333">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ct=c.getContext("2d");
ct.beginPath();
ct.arc(50,50,30,0,2*Math.PI);
ct.stroke();
</script>
4、canvas绘制文本
canvas绘制文本主要属性如下：
font——定义字体样式；
fillText(text,x,y)——在canvas上绘制实心的文本
strokeText(text,x,y)——在canvas上绘制空心的文本
<canvas id="myCanvas" width="200px" height="100px" style="1px solid #333">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ct=c.getContext("2d");
ct.font="30px Arial";
ct.fillText("Hello World",10,50);
ct.strokeText("Hello web",20,20);
</script>
5、canvas中的渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1);
createRadialGradient(x,y,r,x1,y1,r1);
当我们使用渐变对象必须使用两种或者两种以上的的停止颜色。
addColorStop(),指定颜色停止，参数使用坐标来描述，可以是0至1。
使用渐变，设置fillStyle和strokeStyle的值为渐变，然后绘制形状如矩形、直线、文本。
实例
创建一个线性渐变，使渐变填充整个矩形
<canvas id="myCanvas" width="500px" height="500px" style="border:1px solid #333">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ct=c.getContext("2d");
//创建渐变
var grd=ct.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//填充渐变
ct.fillStyle=grd;
ct.fillRect(10,10,150,80);
</script>
6、canvas绘制图像
把一副图片绘制到画布上
drawImage(img,x,y);
<body>
<p>Image to use:</p>
<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,10,10);
}
</script>
</body>
以上是对SVG和Canvas的简单介绍
SVG和Canvas的区别
Canvas
1.依赖分辨率
2.不支持事件绑定
3.弱的文本渲染能力
4.能够以.png和.jpg的格式保存结果图像
5.最适合图像密集的游戏，其中许多对象将会被频繁重绘
SVG
1.不依赖分辨率
2.支持事件处理器
3.最适合带有大型渲染区域的应用程序（比如谷歌地图）
4.复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）
5.不适合游戏应用
网友评论