學(xué)習(xí)html5時(shí)都會(huì)碰到svg和canvas，這兩個(gè)都可以在瀏覽器中繪制圖形，那么這兩個(gè)有什么區(qū)別呢豁护。下面對(duì)兩者進(jìn)行比較。
SVG介紹
SVG（Scable vector Graphics 可縮放矢量圖形）
是一種使用XML來(lái)描述2D圖形的語(yǔ)言欲间；
因?yàn)槭腔赬ML楚里，那么svg DOM中的每一個(gè)元素都可以，綁定上javascript事件處理器猎贴；
在svg中每一個(gè)繪制的圖形都被視為對(duì)象班缎，svg元素的屬性發(fā)生變化那么瀏覽器也會(huì)重新渲染圖形的。
注意：
1她渴、SVG并不屬于html5專(zhuān)有內(nèi)容达址，在html5之前就有SVG。
2趁耗、SVG文件的擴(kuò)展名是".svg"沉唠。
3、SVG繪制的圖像在圖片質(zhì)量不下降的情況下被放大苛败。
4满葛、SVG圖像經(jīng)常在網(wǎng)頁(yè)中制作小圖標(biāo)和一些動(dòng)態(tài)效果圖径簿。
使用
在html5中使用svg必須使用<svg></svg>標(biāo)簽。（svg繪制所有的圖形必須都要在<svg></svg>中繪制）纱扭。
<svg></svg>形成的區(qū)域大小為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標(biāo)簽里的style是svg的屬性，不是css屬性乳蛾。
2暗赶、繪制圓形
<svg>
<circle cx="" cy="" r=""/>
</svg>
cx和cy表示圓心的坐標(biāo)，r表示圓的半徑
3肃叶、繪制橢圓
<svg>
<ellipse cx="" cy="" rx="" ry=""/>
</svg>
cx和cy表示橢圓的中心蹂随，rx和ry表示橢圓的長(zhǎng)軸和短軸。
4因惭、繪制直線
<svg>
<line x1="" y1="" x2="" y2="" />
</svg>
x1和y1表示起始點(diǎn)的坐標(biāo)岳锁，x2,y2終止點(diǎn)的坐標(biāo)。
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>
特殊元素
漸變，漸變?cè)囟x在<defs></defs>標(biāo)簽內(nèi)
1勿决、線性漸變
<linearGradient>標(biāo)簽
<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”是固定寫(xiě)法嘉冒，stdDeviation=5用來(lái)設(shè)置模糊程度。
Canvas介紹
Canvas是通過(guò)javascript來(lái)繪制2D圖像的咆繁；
Canvas是逐像素進(jìn)行渲染的讳推；
在Canvas中一旦圖形被繪制完成，它就不會(huì)得到瀏覽器的關(guān)注玩般，一旦其位置發(fā)生變化银觅，那么整個(gè)場(chǎng)景需要重新繪制，包括任何已被該圖形覆蓋了的圖形壤短。
使用
canvas使用javascript在網(wǎng)頁(yè)上繪制圖像设拟，本身并沒(méi)有繪制能力。
canvas是一個(gè)矩形區(qū)域可以控制其中的每一個(gè)元素久脯。
canvas具有多種繪制路徑、圓形镰吆、矩形帘撰、字符以及圖像的方法。
下面是典型的常用的繪圖方式万皿。
1摧找、填充畫(huà)布
<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")是內(nèi)建的html5對(duì)象核行，擁有多種繪制路徑，矩形蹬耘，圓形芝雪，字符和圖像的方法。
設(shè)計(jì)fillStyle屬性可以是css顏色综苔、漸變或圖案惩系，fillStyle的默認(rèn)值是“#000000”。
2如筛、canvas中的路徑
在canvas中畫(huà)線我們將使用兩種方法:
moveTo(x,y)路徑開(kāi)始的坐標(biāo)
lineTo(x,y)路徑結(jié)束的坐標(biāo)
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上繪制實(shí)心的文本
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中的漸變
漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。
以下有兩種不同的方式來(lái)設(shè)置Canvas漸變：
createLinearGradient(x,y,x1,y1);
createRadialGradient(x,y,r,x1,y1,r1);
當(dāng)我們使用漸變對(duì)象必須使用兩種或者兩種以上的的停止顏色妖胀。
addColorStop(),指定顏色停止芥颈，參數(shù)使用坐標(biāo)來(lái)描述，可以是0至1赚抡。
使用漸變爬坑，設(shè)置fillStyle和strokeStyle的值為漸變，然后繪制形狀如矩形怕品、直線妇垢、文本。
實(shí)例
創(chuàng)建一個(gè)線性漸變肉康，使?jié)u變填充整個(gè)矩形
<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");
//創(chuàng)建漸變
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繪制圖像
把一副圖片繪制到畫(huà)布上
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 標(biāo)簽。</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>
以上是對(duì)SVG和Canvas的簡(jiǎn)單介紹
SVG和Canvas的區(qū)別
Canvas
1.依賴分辨率
2.不支持事件綁定
3.弱的文本渲染能力
4.能夠以.png和.jpg的格式保存結(jié)果圖像
5.最適合圖像密集的游戲吼和，其中許多對(duì)象將會(huì)被頻繁重繪
SVG
1.不依賴分辨率
2.支持事件處理器
3.最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
4.復(fù)雜度高會(huì)減慢渲染速度（任何過(guò)度使用DOM的應(yīng)用都不快）
5.不適合游戲應(yīng)用
