HTML 5入門知識（三）

標籤：寬度   三角形   方法   combine   stroke   繪製矩形   樣式   情況   需要   

　　<canvas>標籤

在網頁中使用canvas元素，像使用其他HTML標籤一樣簡單，然後利用JavaScript指令碼調用繪圖API，繪製各種圖形。canvas擁有多種繪製路徑、矩形、圓形、字元及添加圖形的方法。

　　利用<canvas>標籤繪圖基本流程

1、擷取canvas對象

2、建立二維的繪圖內容物件

3、在canvas上繪製文字

連結:

https://cruxf.github.io/canvas1/text.html

 

 　　繪製基本的圖形

繪製直線：

moveTo（）方法用於建立新的子路徑，並設定其起始點。lineTo（）方法則設定了直線路徑的終點；而stroke（）方法用於沿該路徑繪製一條直線，如：

 

 繪製矩形

 繪圖API為繪製矩形提供了兩個專用的方法：strokeRect（）和fillRect（），可分別用於繪製矩形邊框和填充矩形地區。在繪製之前，往往需要先設定樣式，然後才能進行繪製。其中，strokeStyle可設定矩形邊框顏色，fillStyle可設定填充顏色，lineWidth可設定邊框寬度。

連結：

https://cruxf.github.io/canvas1/squares.html

 

 繪製圓形

在canvas中，所有基本圖形都是以路徑為基礎的，通常會調用linTo（）、rect（）和arc（）等方法設定一些路徑。在最後使用fill（）或stroke（）方法進行繪製邊框或填充地區時，都是參照這個路徑來進行的。使用路徑繪圖基本分為如下3個步驟：

1、建立繪圖路徑。常用到beginPath（）和closePath（）方法，每次調用beginPath（）方法都會產生一個新的子路徑。

2、設定繪圖樣式。使用strokeStyle屬性設定邊框顏色；使用lineWidth屬性設定邊框寬度；使用fllStyle屬性設定填充顏色。

3、繪製圖形。stroke（）方法繪製邊框；fill（）方法繪製填充地區。

 

連結：

https://cruxf.github.io/canvas1/circular.html

 

繪製三角形

繪製三角形同樣需要通過繪製路徑的方法來實現，基本步驟與繪製圓形差不多，如：

closePath（）方法習慣性地放在路徑設定的最後一步，不要認為是路徑設定的結束，因為在此之後，還可以繼續設定路徑。

連結：

https://cruxf.github.io/canvas1/triangle.html

 

圖形組合

在canvas繪圖中，可以通過globalCompositeOperation屬性來設定如何在兩個圖形疊加的情況下組合顏色，用法如下：

參數value的合法值有12個，決定了12種圖形組合的類型，預設值是source-over。12種組合類別型如下：

1、copy：只繪製新圖形，刪除其他所有內容。

2、darker：在圖形重疊的地方，顏色由兩個顏色值相減後決定。

3、destination-atop：已有的內容只在它和新的圖形重疊的地方保留，新圖形繪製於內容之後。

4、destination-in：在新圖形以及已有畫布重疊的地方，已有內容都保留，所有其他內容成為透明的。

5、destination-out：在已有內容和新圖形不重疊的地方，已有內容保留，所有其他內容成為透明的。

6、destination-over：新圖形繪製於已有內容的後面。

7、lighter：在圖形重疊的地方，顏色由兩種顏色值的加值來決定。

8、source-atop：只有在新圖形和已有內容重疊的地方，才繪製新圖形。

9、source-in：只有在新圖形和已有內容重疊的地方，新圖形才繪製，所有其他內容成為透明的。

10、source-out：只有在和已有圖形不重疊的地方，才繪製新圖形。

11、source-over：新圖形繪製於已有圖形的頂部，這是預設行為。

12、xor：在重疊和正常繪製的其他地方，圖形都成為透明的。

函數RectArc（context）是用來繪製組合圖形的，使用方法translate（）移動到不同的位置。

連結：

https://cruxf.github.io/canvas1/combinedgraph.html

 

繪製曲線

 在canvas中，繪圖API提供了多種曲線的繪製方法，主要的曲線繪製方法有arc（）、arcTo（）、quardraticCurveTo（）和bezierCureveTo（）。

使用arc（）方法，如：

假如在繪製圓弧的時候用closePath（）閉合繪製路徑，那麼就會產生一個半圓。

連結：

https://cruxf.github.io/canvas1/curve1.html

 

使用arcTo（）方法：

 

arcTo（）方法使使用切線的方法繪製弧線，使用兩個目標點和一個半徑，為當前的子路徑添加一條弧線。與arc（）方法相比，同樣是繪製弧線，繪製思路和側重點不同。

連結：

https://cruxf.github.io/canvas1/curve2.html

 

使用quadraticCurveTo（）方法：

二次樣條曲線是曲線的一種，canvas繪圖API專門提供了此曲線的繪製方法。quadraticCurveTo（）方法為當前的子路徑添加一條二次樣條曲線。

連結：

https://cruxf.github.io/canvas1/curve3.html

 

使用bezierCurveTo（）方法：

貝茲路徑是應用於二維圖形應用程式中的數學曲線。與二次樣條曲線相比，貝茲路徑使用了兩個控制點，從而可以建立更複雜的曲線圖形。

連結：

https://cruxf.github.io/canvas1/curve4.html

 

繪製文本

 通過<canvas>標籤，可以使用填充的方法繪製文本，也可以使用描邊的方法繪製文本，在繪製文本之前，還可以設定文字的字型樣式和對齊。繪製文本有兩種方法，即填充繪製方法fillText（）和描邊繪製方法strokeText（），如：

 

有些時候，開發人員需要知道所繪製的文本寬度，以方便進行布局。繪圖API挺了擷取繪製文本寬度的方法，measureText（）方法就是用來擷取文本的寬度。

連結：

https://cruxf.github.io/canvas1/text1.html

 

建立對象陰影：

連結：

https://cruxf.github.io/canvas1/text2.html

 

 繪製線性漸層：

使用漸層需要三個步驟：首先是建立漸層對象；其次是設定漸層顏色和過渡方式；最後將漸層對象賦值給填充樣式或描邊樣式。

線性漸層是指起始點和結束點之間線性插入顏色值，設定漸層顏色需要在漸層對象上使用addColorStop（）方法，在漸層中的某一點添加一個顏色變化。如：

 連結：

https://cruxf.github.io/canvas1/lineargradient.html

 

 繪製放射狀漸層：

放射狀漸層是指兩個指定圓的圓周之間放射性地表現顏色過渡效果。如：

連結：

https://cruxf.github.io/canvas1/radialgradient.html

 

 繪製映像：

使用drawImage（）方法可以將圖形添加到canvas畫布中，即繪製一幅映像，有3種方法。

1、把整個映像複製到畫布中，將其放置到指定的左上方座標位置，並且將每個映像像素映射成畫布座標系統的一個單元，如：

2、把整個映像複製到畫布中，但是允許用畫布單位來指定想要的映像寬度和高度，如：

3、使用複雜，暫且不提。

 

裁切圖形：

在路徑繪圖中使用了兩種繪圖方法，即用於繪製線條的stroke（）方法和用於填充地區的fill（）方法。關於路徑的處理，還有一種方法叫作裁切方法clip（）。

裁切的地區是通過路徑來確定的，和繪製線條的方法和填充地區的方法一樣，也需要預先確定繪圖路徑，再執行裁切地區路徑方法clip（），這樣就確定了裁切地區，如：

連結：

https://cruxf.github.io/canvas1/drawimg.html

HTML 5入門知識（三）