一、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) 縮放
畫布的縮放，其實就是講畫布向后移動，跟人的視距就變遠了，近大遠小
二、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：無限次
三、canvas與svg的區別
1、svg繪制出來的每一個圖形的元素都是獨立的DOM節點，能夠方便的綁定事件或用來修改。canvas輸出的是一整幅畫布；
2、svg輸出的圖形是矢量圖形，后期可以修改參數來自由放大縮小，不會是真和鋸齒。而canvas輸出標量畫布，就像一張圖片一樣，放大會失真或者鋸齒