canvas 畫布 位圖
1. 不要在style中給canvas設置寬高 會有位移差
2. 給c設置一個繪圖環境 得到的是一個對象
var c=document.getElementById("c1")
var can=c.getContentext("2d");
3. fillRect() 繪制一個填充的方塊 默認顏色是是黑色
4. strokeRect() 繪制帶邊框的方塊
繪制線條
moveTo()繪制線段的起點
lineTo()繪制線段的領點
每個線條只能有一個moveTo可以有多個lineTo
stroke()繪制線段
beginPath()
cosePath() 二者同時出現 將繪制路徑閉合
(起始點 結尾點首尾相連)
Rect() 繪制方塊
clearRect(0,0,width,height)清除畫布
can.save()
can.restore() 二者成對出現 中間的屬性樣式只能影響內部 不影響外部
畫圓
can.arc(200,200,50,0,Math.PI,true)
can.stroke()
200,200是圓心坐標
50是半徑
0是起始弧度 Marh.PI是結束弧度
true 是逆時針方向
注意 角度有正負之分 順時針的角度是正的 逆時針轉的角度是負的
畫布的平移和旋轉
平移transfate畫布大小位置不變 起始坐標 變了
can.tanslate(100,100)
can.fillRect(-100,-100,50,50);
相當於坐標平移
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后面跟七個值
transform 轉換svg中的一個屬性 translate rotate scale
平移 旋轉 都是以起點 0 0(svg左上角)點位參考 而css3 中以元素的中心點為參考點
G 用於將相關元素進行組合
G身上的屬性 子元素都會繼承 但是g上的屬性都必須是顯現屬性 不是svg元素私有的
比如g上的圓心坐標不行
text用於定義文本x y xy的值在字體的左下角
text-anchor="middle" 讓字體居中
image 繪制圖片
use用於復制元素 x y
x y是相對於原始的元素的坐標位置 不是相對svg的0 0點坐標
animate
寫在需要動畫元素的中間
attributeName form to dur repeatCount="indefinite"(無限次)
canvas和svg的不同
矢量圖就是說 放大多少倍 都不會出現馬賽克 。 永遠都是清晰的
位圖就是說 放大比原圖尺寸的倍數后 就會出現馬賽克， 不清晰了， 看着就模糊了。
這就是唯一的差別