canvas、svg、canvas與svg的區別

1、canvas

　　canvas　　畫布，位圖

　　<canvas> 標籤訂義圖形，好比圖表和其餘圖像，您必須使用腳原本繪製圖形

　　注意：不要在style中給canvas設置寬高，會有位移差

　　canvas的使用：

　　　　先獲取canvas

　　　　var c=document.getElementById("c1")

　　　　獲取以後，須要給canvas設置一個繪圖環境

　　　　var can=c.getContext("2d")

　　繪製方塊：

　　　　fillrect(x,y,w,h) 繪製一個填充的方格,默認顏色是黑色，

　　　　　　　　前兩個參數是座標（x軸和y軸），後兩個參數是寬高

　　　　strokeRect(x,y,w,h) 繪製帶邊框的方塊；

　　設置繪圖

　　　　fillStyle:填充顏色（繪製canvas是有順序的）

　　　　lineWidth：線寬度，是一個數值

　　　　strokeStyle：邊線顏色

　　注意填充(fillrect)和畫線(strokeRect)的區別。

　　　　先畫線後填充。那麼填充覆蓋畫線，線框的寬度就會縮小一倍

　　　　先填充後畫線。那麼畫線覆蓋填充，方塊的寬度就會縮小一倍

　　邊界的繪製

　　　　beginPath:開始繪製路徑

　　　　closePath：結束繪製路徑

　　　　moveTo：移動到繪製的新目標點

　　　　lineTo：新的目標點

　　　　每一個線條只能有一個moveTo()能夠有多個lineTo()

　　繪製路徑

　　　　stroke:畫線，默認黑色

　　　　fill：填充 默認黑色

　　　　rect：矩形區域

　　　　clearRect：刪除一個畫布的矩形區域

　　　　save：保存路徑

　　　　restore：回覆路徑

　　清除畫布：

　　　　clearRect(x,y,w,h) 清除畫布

　　　　前兩個參數是座標（x軸和y軸），後兩個參數是寬高

　　繪製圓形：

　　　　arc(x,y,半徑，起始弧度，結束弧度，旋轉方向)

　　　　　　x，y是圓心的座標

　　　　　　turn是逆時針，是從鐘錶3點的那個點開始旋轉的

　　　　　　逆時針爲-，順時針爲+

　　插入字體：

　　　　fillText("內容",x,y) 在 canvas 上繪製實心的文本，xy是座標

　　　　strokeText("內容",x,y)在 canvas 上繪製空心的文本

　　　　textAlign="center" 居中　　也就是將xy座標與字體的中心居中

　　畫布的平移和旋轉

　　　　translate(x,y) 平移

　　　　　　畫布的大小位置不變，是畫布的起始位置變了，

　　　　　　也就是說，是將畫布的座標平移了，原來的起始點(0,0)點，變成了你平移的位置加上-，

　　　　　　起始點就是平移的位置

　　　　　　可是做圖的地方仍是原來的大小

　　　　rotate() 旋轉

　　　　　　屬性是角度，

　　　　　　旋轉都是以畫布的起始點(0,0)旋轉

　　　　scale(0.5,0.5) 縮放

　　　　　　畫布的縮放，其實就是講畫布向後移動，跟人的視距就變遠了，近大遠小

2、svg

　　svg　　矢量圖

　　svg繪製矢量圖，canvas繪製位圖的

　　svg使用xml格式繪製圖形的

　　svg要有一個根節點，叫svg標籤，就相等於html

　　裏面的xmlns是命名空間，version是版本

　　若是不設置大小，默認佔用大小爲300x150

　　定義矩形

　　　　rect標籤

　　　　　　屬性有：width，height，x,y,rx,ry,fill,stroke-width,stroke style

　　　　　　　　　　stroke-width:線條寬度 stroke：線條顏色

　　　　　　　　　　x 屬性定義矩形的左側位置

　　　　　　　　　　y 屬性定義矩形的頂端位置

　　　　　　　　　　

　　　　　　style="fill-opacity:0.2；stroke-opacity:0.5;opacity:0.5"

　　　　　　fill-opacity和opacity的區別：

　　　　　　　　fill-opacity只改變填充色的透明度 ，opacity改變fill和stroke的透明度都改變

　　定義圓：circle

　　　　　　circle
　　　　　　　　cx：圓的x軸座標

　　　　　　　　cy：圓的y軸座標

　　　　　　　　r：圓的半徑

　　　　　　　　

　　定義橢圓：ellipse
　　　　　　ellipse
　　　　　　　　CX屬性定義的橢圓中心的x座標

　　　　　　　　CY屬性定義的橢圓中心的y座標

　　　　　　　　RX屬性定義的水平半徑

　　　　　　　　RY屬性定義的垂直半徑

　　　　　　　　　　

　　定義直線：line
　　　　　　line
　　　　　　　　x1 屬性在 x 軸定義線條的開始

　　　　　　　　y1 屬性在 y 軸定義線條的開始

　　　　　　　　x2 屬性在 x 軸定義線條的結束

　　　　　　　　y2 屬性在 y 軸定義線條的結束

　　　　　　　　必須結合stroke繪製

　　　　　　　　

　　定義折線：polyline
　　　　polyline

　　　　屬性是points，折線點的座標

　　　　

　　定義路徑：path
　　　　path，有個d屬性
　　　　　　d="定義路徑指令"
　　　　　　M = moveto 起點座標，開始點

　　　　　　L = lineto 相鄰座標，下一個點

　　　　　　H = horizontal lineto H表明水平畫線，默認Y軸上的值同樣

　　　　　　V = vertical lineto V表明水平畫線，默認X軸上的值同樣

　　　　　　A = elliptical Arc 用於畫曲線的

　　　　以上全部命令均容許小寫字母。大寫表示絕對定位，小寫表示相對定位(相對於上一個點)。

　　　　　　

　　transform：轉換，

　　　　平移，旋轉都是以起點((0,0)svg的左上角)點爲參考點，而css中以元素的中心點爲參考點

　　組合　　g
　　　　g用於將 相關元素進行組合
　　　　g身上的屬性，子元素都會繼承，可是g上的屬性都必須是顯現屬性，不是svg元素私有的，
　　　　好比g上的圓心座標就不行

　　定義文本：text

　　　　x座標，y座標，

　　　　xy的值在字體的左下角

　　　　文字居中處理：text-anchor:middle;

　　　　　　

　　圖片：image

　　　　x，y是座標，xlink：href="圖片所在的路徑"

　　　　

　　克隆：use

　　　　x，y是相對於原始的元素的座標位置，不是相對svg的(0,0)點的座標

　　　　x="克隆元素的左上角的x軸"
　　　　y="克隆元素的左上角的y軸"
　　　　width="克隆元素的寬度"
　　　　height="克隆元素的高度"
　　　　xlink:href="URI引用克隆元素"

　　　　

　　動畫：animate

　　　　這個標籤是你放在哪一個標籤裏就是哪一個動
　　　　注意：
　　　　　　寫在須要動畫元素的中間
　　　　attributeName="目標屬性名稱"
　　　　from="起始值"
　　　　to="結束值"
　　　　dur="持續時間"
　　　　repeatCount="動畫時間將發生"，indefinite：無限次

 　　　　

3、canvas與svg的區別

　　　　一、svg繪製出來的每個圖形的元素都是獨立的DOM節點，可以方便的綁定事件或用來修改。canvas輸出的是一整幅畫布；

　　　　二、svg輸出的圖形是矢量圖形，後期能夠修改參數來自由放大縮小，不會是真和鋸齒。而canvas輸出標量畫布，就像一張圖片同樣，放大會失真或者鋸齒