canvas和svg整理筆記

Canvas畫布   位圖

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

2，

3,fillRect()繪製一個填充的方塊，默認顏色是黑色。

strokeRect()繪製帶邊框的方塊。

繪製線條：

moveTo()繪製線段的起點。

lineTo()繪製線段的令點。

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

Stroke()繪製線段

beginPath(), closePath()兩者同時出現，將繪製路徑閉合（起始點，結尾點收尾相連）

Rect()繪製方塊

clearRect(0,0,width,height)清楚畫布

Can.save(),Can.restore()兩者成對出現，中間的屬性樣式隻影響內部，不影響外部畫圓

200,200是圓心座標

50是半徑

0是起始弧度  Math.PI是結束弧度

true是逆時針方向

注意：角度有正負之分，順時針轉的角度是正的，逆時針轉的角度是負的。

貝塞爾曲線先了解

畫布的平移和旋轉

平移translate畫布大小位置不變，起始座標變了

至關於座標平移

Rotate()

畫布的旋轉都是以00起始點爲中心點旋轉

Scale(0.5,0.5)

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

畫布中插入圖片：

插入字體：

200,200字體的起始點，默認在起始點在字體的左下角

svg矢量圖

　　svg繪製矢量圖canvas用於繪製位圖

　　svg使用xml格式繪製圖形

svg要有一個根節點，叫svg標籤，就至關於html

svg若是不設置大小，默認佔用面積300*150

定義矩形

　　rect標籤屬性有width,height, x y rx ry fill stroke-width stroke style

　　Style="fill-opacity:0.2;stroke-opacity:0.5;opacity:0.5"

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

定義圓：

　　circle cx cy 定義園的圓心座標 r定義半徑

定義橢圓：

Ellipse cx cy 定義圓心座標  rx 定義x軸半徑 ry定義y軸半徑

定義直線：

Line  x1 y1 定義起始座標 x2 y2 定義結束座標 必須結合stroke繪製

定義多邊形：

Polygon points=" "寫多邊形角的座標  fill-rule=""

定義折線：

Polyline  points=」 」  折點的座標

 

定義路徑：

path d="M"

M是起點座標 L是相鄰點座標 Z讓路徑構成閉合迴路

H表明水平的線條 默認y軸上的值同樣

V 表明垂直的線條 默認x軸上的值同樣

A 後面跟七個值

 

Transfrom 轉換 svg中的一個屬性 translate  rotate scale

平移 旋轉 都是以起點0 0（svg的左上角）點爲參考點 而css3中以元素的中心點爲參考點

G 用於將相關元素進行組合

G身上的屬性 子元素都會繼承 可是g上的屬性都必須是顯現屬性 不是svg元素私有的 好比 g 上的圓心座標不行

Text 用於定義文本 x y xy的值在字體的左下角 

Text-anchor=」middle」 讓字體居中

Image 繪製圖片

Use用於複製元素 x y

Xy 是相對於原始的元素的座標位置 不是相對svg的00點座標

Animate

寫在須要動畫元素的中間

attributeName  form to dur repeatCount=」indefinite」(無限次)

echarts

引入文件後 console.log(echarts) //echarts object