1. canvas元素基礎
canvas元素是HTML5中新增的一個重要元素，專門用來繪製圖形。
在頁面中使用canvas元素繪製圖形需要經過的三個步驟：
步驟一 使用canvas元素建立一個畫布區域，並獲取該元素。
步驟二 通過獲取的canvas元素，取得該圖形元素的上下文環境物件。
步驟三 根據取得的上下文環境物件，在頁面中繪製圖形或動畫。
1.1 頁面新增canvas元素
<canvas id="cnvMain" width="500" height="300"></canvas>
1.2 繪製矩形
使用canvas元素繪製矩形的步驟：
1> 獲取canvas元素
使用document.getElementById()方法獲取canvas物件，需要呼叫這個物件提供的方法來進行圖形繪製。
2> 獲取上下文（context）
進行圖形繪製時，需要使用圖形上下文（graphics context），圖形上下文是一個封裝了繪圖功能的物件。使用canvas物件的getContext()來獲得圖形上下文。在draw函式中，將引數設定為“2d”。
3> 填充與繪製邊框
canvas元素繪製圖形的兩種方式：填充（fill）與繪製邊框（stroke），填充是指填滿圖形內部，繪製邊框是繪製圖形的邊框。canvas元素結合使用這兩種方式來繪製圖形。
4> 設定繪圖樣式（style）
在進行繪製圖形時，先要設定好繪圖的樣式，再呼叫方法進行圖形繪製。
設定填充圖形樣式：fillStyle填充的樣式，在該屬性中填入填充的顏色值。
設定圖形邊框的樣式：strokeStyle圖形邊框的樣式，在該屬性中填入邊框的顏色值。
5> 指定線寬
使用圖形上下文物件的lineWidth屬性設定圖形邊框的寬度。在繪製圖形的時候，任何直線都可以通過lineWidth屬性來指定直線的寬度。
6> 指定顏色值
繪圖時填充的顏色或邊框的顏色分別通過fillStyle屬性與strokeStyle屬性來指定。顏色值使用CSS中使用的顏色值。
7> 繪製矩形
分別使用fillRect()與strokeRect()來填充矩形和繪製矩形邊框。
context.fillRect(x, y, width, height)
其中，x表示矩形起點x軸與左上角(0, 0)之間的距離，y表示矩形起點y軸與左上角(0, 0)之間的距離，width表示矩形的寬度，height表示矩形的高度。
context.strokeRect(x, y, width, height)
其中x,y為矩形起點座標，width為矩形寬度，height為矩形高度。
context.clearRect(x, y, width, height)
清空圖形中指定區域的畫素，清空後的區域為透明色。
HTML程式碼
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 500, 300); context.fillStyle = "red"; context.strokeStyle = "blue"; context.lineWidth = 1; context.fillRect(50, 50, 100, 100); context.strokeRect(50, 50, 100, 100); } </script> </head> <body> <canvas id="canvas" width="500" height="300"></canvas> </body> </html>
效果圖
2. 使用路徑
在頁面的canvas元素中，呼叫繪畫路徑的moveTo()及lineTo()方法可以繪製直線，呼叫arc()方法可以繪製指定位置與大小的圓形。
2.1 moveTo與lineTo的用法
在canvas元素中，如果要繪製直線，通常使用moveTo()與lineTo()兩個方法。moveTo()方法用於將畫筆移至指定點並以改點為直線的開始點，呼叫格式：
context.moveTo(x, y)
其中，x為移至起點的橫座標，y為移至起點的縱座標。呼叫該方法後，canvas中即設定了一個繪製直線的開始點。如果是繪製直線還需要呼叫lineTo()方法，該方法將用畫筆從指定的起點座標與傳遞的終點座標引數直接繪製一條直線。呼叫格式：
context.lineTo(x, y)
其中，x為移至的終點橫座標，y為移至終點的縱座標。該方法可以反覆使用，第一次呼叫後，畫筆自動移至終點座標位置；第二次呼叫時，又以該座標位置作為第二次呼叫時的起點位置，開始繪製直線。當直線路徑繪製完成後，呼叫stroke()方法在canvas中描邊直線路徑，最終在canvas中展示直線效果，呼叫格式：
context.stroke()
stroke()方法無引數，用於繪製完路徑後對路徑進行描邊處理。
HTML程式碼
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.moveTo(200, 30); context.lineTo(30, 100); context.lineTo(200, 200); context.lineWidth = 1; context.stroke(); } </script> </head> <body> <canvas id="canvas" width="500" height="300"></canvas> </body> </html>
效果圖
設定描邊顏色：
context.strokeStyle = "red";
2.2 繪製圓形
在canvas中，使用context物件中的arc()方法描繪圓形路徑，以及繪製各種形狀的圓形圖案，呼叫格式：
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
其中，x表示繪製圓形的橫座標，y表示繪製圓形的縱座標，radius表示繪製圓形的半徑，單位為畫素，startAngle表示繪製圓弧時開始角度，endAngle表示繪製圓弧時結束的角度，anticlockwise是一個布林值，表示十分按順時針繪製，如果為“true”表示按順時針繪製；如果為“false”，表示按逆時針繪製。如果要繪製一個完整的圓形，startAngle的值為0，表示從0弧度開始，引數endAngle的值為Math.PI * 2，表示到360弧度時結束。如果要繪製一個半圓形，startAngle的值為0，endAngle的值為Math.PI * 1，表示到180弧度時結束。
在呼叫arc()方法繪製圓形路徑之前，需要呼叫context物件中的beginPath()方法，宣告開始繪製路徑，呼叫格式：
context.beginPath()
在使用遍歷或迴圈繪製路徑時，每次都要呼叫該方法，beginPath()方法僅對應單次的路徑繪製。
繪製圓形路徑完成之後，需要呼叫closePath()方法，將所繪製完成的路徑進行關閉，呼叫格式：
context.closePath()
closePath()是對應單次的路徑繪製，在一般情況下，與beginPath()成對使用。
圓形路徑繪製完成之後，並沒有真正在canvas元素中展示，需要對路徑進行描邊或填充。
描邊呼叫context物件的stroke()方法，在呼叫之前，可以設定邊框的顏色與寬度。
context.strokeStyle = "#CCCCCC";
context.lineWidth = 1;
context.stroke();
填充呼叫context物件的fill()方法，在呼叫之前，可以設定填充的顏色。
context.fillStyle = "#EEEEEE";
context.fill();
示例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(100, 100, 50, 0, Math.PI * 2, true); context.closePath(); context.strokeStyle = "#666666"; context.lineWidth = 1; context.stroke(); } </script> </head> <body> <canvas id="canvas" width="500" height="300"></canvas> </body> </html>
效果圖
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(100, 100, 50, 0, Math.PI * 2, true); context.closePath(); context.strokeStyle = "#666666"; context.lineWidth = 1; context.stroke(); context.fillStyle = "#CCCCCC"; context.fill(); } </script> </head> <body> <canvas id="canvas" width="500" height="300"></canvas> </body> </html>
效果圖
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(100, 100, 50, 0, Math.PI * 2, true); context.closePath(); context.strokeStyle = "#666666"; context.lineWidth = 1; context.stroke(); context.fillStyle = "#CCCCCC"; context.fill(); context.beginPath(); context.arc(175, 100, 50, 0, Math.PI * 2, true); context.closePath(); context.strokeStyle = "#666666"; context.lineWidth = 1; context.stroke(); } </script> </head> <body> <canvas id="canvas" width="500" height="300"></canvas> </body> </html>
效果圖
3. 繪製漸變圖形
3.1 繪製線性漸變
漸變是指在填充時從一種顏色慢慢過渡到另一種顏色。線性漸變時需要使用context物件的createLinearGradient()方法，該方法定義：
context.createLinearGradient(xStart, yStart, xEnd, yEnd)
其中，xStart為漸變起始點的橫座標，yStart為漸變起始點的縱座標，xEnd為漸變結束點的橫座標，yEnd為漸變結束點的縱座標。
在LinearGradient物件之後，使用addColorStop()方法進行設定，該方法定義：
context.addColorStop(offset, color)
其中，offset為所設定的顏色離開漸變起始點的偏移量，該引數的值是一個範圍在0到1之間的浮點值，漸變起始點的偏移量為0，漸變結束點的偏移量為1。color為繪製時使用的顏色。
因為是漸變，所以至少需要使用兩次addColorStop()方法以追加兩個顏色，可以追加多個顏色。
接著把fillStyle設定為LinearGradient物件，執行fill()方法填充，可以繪製出漸變圖形。
示例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var gl = context.createLinearGradient(0, 0, 0, 300); gl.addColorStop(0, "blue"); gl.addColorStop(1, "red"); context.fillStyle = gl; context.fillRect(0, 0, 500, 300); } </script> </head> <body> <canvas id="canvas" width="500" height="300"></canvas> </body> </html>
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(100, 100, 50, 0, Math.PI * 2, true); context.closePath(); var gl = context.createLinearGradient(0, 0, 0, 150); gl.addColorStop(0, "blue"); gl.addColorStop(1, "red"); context.fillStyle = gl; context.fill(); } </script> </head> <body> <canvas id="canvas" width="500" height="300"></canvas> </body> </html>
效果圖
3.2 繪製徑向漸變
徑向漸變是指沿著圓形的半徑方向向外進行擴散的漸變方式，使用context物件的createRadialGradient()方法繪製徑向漸變，方法定義：
context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
其中，xStart為漸變開始圓的圓心橫座標，yStart為漸變開始圓的圓心縱座標，radiusStart為開始圓的半徑，xEnd為漸變結束圓的圓心橫座標，yEnd為漸變結束圓的圓心縱座標，radiusEnd為結束圓的半徑。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var gnt = context.createRadialGradient(30, 30, 0, 20, 20, 400); gnt.addColorStop(0, "#000000"); gnt.addColorStop(0.3, "#EEEEEE"); gnt.addColorStop(1, "#FFFFFF"); context.beginPath(); context.arc(125, 95, 80, 0, Math.PI * 2, true); context.closePath(); context.fillStyle = gnt; context.fill(); context.beginPath(); context.arc(125, 95, 80, 0, Math.PI * 2, true); context.closePath(); context.strokeStyle = "#666666"; context.lineWidth = 1; context.stroke(); } </script> </head> <body> <canvas id="canvas" width="500" height="300"></canvas> </body> </html>
效果圖
