canvas與svg整理與區別

1.canvas畫布(位圖)

2.繪製矢量圖

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

2.

         //獲取元素
	var c=document.getElementById("c")
	//獲取繪圖環境
	var c=c.getContext("2d")                                    

　　

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

strokeRect() 繪製帶邊框的方塊

繪製線條

moveTo() 繪製線段起點

lineTo() 繪製線段的領點

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

stroke() 繪製線段

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

Rect() 繪製方塊

clearRect（0,0,width,height）清楚畫布

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

1.畫圓

c.closePath()
c.fill()
c.restore()
c.moveTo(200,200)
c.arc(200,200,150,0,360*Math.PI/180,true)
c.stroke()

200,200是圓形座標 50是半徑

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

true是逆時針 flase是順時針

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

2.畫布的平移和旋轉

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

至關於座標平移

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

scale(0.5,0.5) 畫布的縮放 就是將畫布向後移動 跟人的視距就變遠了 近大遠小

c.fillStyle='lightpink'
c.scale(0.5,0.5)
c.fillRect(0,0,100,100)

畫布中插入圖片　

//獲取元素
	var c=document.getElementById("c")
	//獲取繪圖環境
	var c=c.getContext("2d")
	
	var img=new Image;
	
	img.src="img/02.jpg"
	img.onload=function(){
		c.drawImage(img,10,20,160,200)
	}

插入字體

//字體大小 樣式
	c.font="30px imapct"
	c.fillText("全站最強",200,200)
	//字體空心
	c.strokeText("Big smile!",200,200)

svg

svg繪製矢量圖

svg使用xml格式繪製圖形

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="400px">
</svg>

　　

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

1.定義矩形

rect標籤有：

width height 矩形寬高

fill 定義矩形填充顏色(rgb值、顏色名或16進制)

stroke-width 定義矩形邊框寬度

stroke 定義矩形邊框以及顏色

x 定義矩形左側位置(矩形到瀏覽器窗口左側距離)

y 定義矩形頂端位置(矩形到瀏覽器窗口頂端位置)

fill-opacity 定義填充顏色透明度

stroke-opacity 定義邊框顏色透明度

Rx Ry 能夠使矩形產生圓角

<!--矩形-->
  			<rect width="100px" height="100px" x="50" y="250" rx="20" ry="20"  style="fill:pink;stroke-width: 5;stroke: red;"></rect>

fill-opactty和opacity的區別?

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

2.定義圓

circle cx cy 定義圓點的 x和y座標。若是省略cx和cy，圓的中心會設置爲(0,0)

r定義半徑

<!--圓形-->
<circle cx="200" cy="200" r="50" style="stroke:"pink"; fill:'red';">
</circle>

3.定義橢圓

橢圓和圓很類似。不一樣之處在於橢圓有不一樣的x和y半徑，而圓的x和y半徑是相同的

ellipse cx cy定義圓中心的x，y座標

rx 定義水平半徑

ry 定義垂直半徑

<!--橢圓-->
<ellipse cx="300" cy="340" rx="100" ry="50" style="fill: yellowgreen;"></ellipse>

4.定義直線

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

<!----直線---->
<line x1="150" y1="250" x2="100" y2="100" style="stroke: lawngreen;"></line>

5.定義多邊形

polygon poinits=「定義多邊形每一個角x和y座標」

<!--定義多邊形-->
<polygon points="240,10 330,190 290,210" style="fill: pink; stroke: red;">
</polygon>

6.定義曲線(折線)

polyline poinits「折點的座標」

<!--曲線-->
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160 "style="stroke-width:5 ; stroke: pink; fill: none; ">

7.定義路徑

d=「定義路徑指令」

M 是起點座標

L 是相鄰點座標

Z是讓路徑構成閉合迴路

H表明水平劃線 默認y軸上值如出一轍

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

A 後面跟七個值

<!--定義路徑-->	
<path id="path" d="M100 50 A60 60 0 1 0  300 50 " stroke="red" fill="none"></path>

　　

8.g 用於相關元素進行組合

<g fill="pink" stroke="black" cx="60" cy="50" transform="translate(100,50)">
<circle  r="30" ></circle>
<circle  r="10" fill="blue" ></circle>		
</g>

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

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

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

text 用於定義文本 xy xy的值在字體左下角

<!----txte---->
<text stroke="blue" x="400" y="400" font-size="20" text-anchor="middle">哈哈哈哈</text>

9.繪製圖片

<!----image---->
<image x="80" y="80" width="100" height="100" xlink:href="02.jpg"></image>

 10.use 用於複製元素 xy

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

<!----use---->
<circle cx="40" id="a" cy="40" r="10" translate="100,0" fill="blue"></circle>
<use x="10" y="10" xlink:href="#a"></use>

11.animate 寫在須要動畫元素的中間

<circle cx="250" cy="310" r="15" fill="lightblue">
<animate attributeName="cy" from="310" to="690" dur="2s" repeatCount="indefinite">
</circle>