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>
效果圖
