HTML5的<canvas>標簽怎么用

這篇文章主要介紹“HTML5的<canvas>標簽怎么用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“HTML5的<canvas>標簽怎么用”文章能幫助大家解決問題。

　　<canvas>標簽

　　在網頁中使用canvas元素，像使用其他HTML標簽一樣簡單，然后利用JavaScript腳本調用繪圖API，繪制各種圖形。canvas擁有多種繪制路徑、矩形、圓形、字符及添加圖形的方法。

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

　　1、獲取canvas對象

　　2、創建二維的繪圖上下文對象

　　3、在canvas上繪制文字

　　鏈接：

　　繪制基本的圖形

　　繪制直線：

　　moveTo（）方法用于創建新的子路徑，并設置其起始點。lineTo（）方法則設置了直線路徑的終點；而stroke（）方法用于沿該路徑繪制一條直線，如：

　　繪制矩形

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

　　鏈接：

　　繪制圓形

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

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

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

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

　　鏈接：

　　繪制三角形

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

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

　　鏈接：

　　圖形組合

　　在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（）移動到不同的位置。

　　鏈接：

　　繪制曲線

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

　　使用arc（）方法，如：

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

　　鏈接：

　　使用arcTo（）方法：

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

　　鏈接：

　　使用quadraticCurveTo（）方法：

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

　　鏈接：

　　使用bezierCurveTo（）方法：

　　貝塞爾曲線是應用于二維圖形應用程序中的數學曲線。與二次樣條曲線相比，貝塞爾曲線使用了兩個控制點，從而可以創建更復雜的曲線圖形。

　　鏈接：

　　繪制文本

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

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

　　鏈接：

　　創建對象陰影：

　　鏈接：

　　繪制線性漸變：

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

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

　　鏈接：

　　繪制徑向漸變：

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

　　鏈接：

　　繪制圖像：

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

　　1、把整個圖像復制到畫布中，將其放置到指定的左上角坐標位置，并且將每個圖像像素映射成畫布坐標系統的一個單元，如：

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

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

　　裁切圖形：

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

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

關于“HTML5的<canvas>標簽怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。