☆ canvas.getContext('2d')不可在convas中直接繪圖，必須用該方法獲得其二維空間繪圖上 下文。☆ context.beginPath()表示開始新的路徑繪制。☆ context.isPointInPath(x, y)判斷某個點是否在路徑上。在坐標系被轉換后該方法不適用。☆ context.moveTo(x,y)相當于將畫筆從畫板提起，筆尖離開畫板，然后再將筆尖定位在 (x,y)坐標處，在這個新的位置開始新的繪制。☆ context.lineTo(x, y)相當于畫筆筆尖不離開畫板，畫筆筆尖從當前坐標位置移動至 (x,y)坐標處，繪制一條線段。☆ context.stroke()在convas上繪圖后，一些繪制操作必須調用該方法才能讓繪制內 容顯示。☆ context.save()該方法保存convas的當前狀態，無論以后對convas坐任何改變， 只要在做這些改變前保存convas狀態，以后就可以調用 context.restore()方法恢復到保存的這個狀態。通常在一段新繪制 或修改操作前應該保存convas的原始狀態（沒有進行任何繪制或更改 ），每次在一段新繪制或修改操作結束后在將其恢復到原始狀態。這 樣有利于以后的繪制操作。 實際上，canvas的2d繪圖環境context的許多屬性和一些方法與狀 態有關，每個屬性的值被改變（或者使用某些方法改變繪圖狀態）， 繪圖狀態就改變。若在每次改變后都保存，則一個屬性的多個狀態會 以棧（stack）的形式保存，可以依照棧的順序多次調用restore()方 法來回到相應保存的狀態。☆ context.translate(x, y)該方法將當前坐標原點移動到(x, y)處。☆ context.restore()恢復convas狀態為上一次保存的狀態。☆ context.closePath()This command is very similar in behavior to the lineTo function, with the difference being that the destination is automatically assumed to be the origination of the path. However, the closePath also informs the canvas that the html' target='_blank'>current shape has closed or formed a completely contained area. This will be useful for future fills and strokes. At this point, you are free to continue with more segments in your path to create additional subpaths. Or you can beginPath at any time to start over and clear the path list entirely.☆ context.fill();在設置填充樣式后填充閉合路徑。調用該方法后不必再調用 context.stroke()方法。☆ context.fillRect(x, y, width, height)在(x, y)處繪制并填充寬和長為(width, height)的矩形區域。調 用該方法后不必再調用context.stroke()方法。☆ context.strokeRect(x, y, width, height) 在(x, y)處繪制寬和長為(width, height)的矩形輪廓。☆ context.clearRect(x, y, width, height)清理位置（矩形的左上角）在(x, y,)，大小為(width, height) 的矩形區域。 Remove any content from the rectangular area and reset it to its original, transparent color. The ability to clear rectangles in the canvas is core to creating animations and games using the HTML5 Canvas API. By repeatedly drawing and clearing sections of the canvas, it is possible to present the illusion of animation, and many examples of this already exist on the Web. However, to create animations that perform smoothly, you will need to utilize clipping features and perhaps even a secondary buffered canvas to minimize the flickering caused by frequent canvas clears.☆ context.drawImage( )該方法有三個重載，可將圖像繪制在canvas上。圖像來源可以是 頁面中的img標記、JS中的image對象和video的一幀。 context.drawImage(img, x, y) 在(x, y)處用圖像img繪制圖像。當canvas的大小大于圖像時 ，整個圖像被繪制；當圖像大于canvas時，多余的部分被裁剪。 context.drawImage(img, x, y, w, h) 在(x, y)處用圖像img繪制長和寬為(w, h)的矩形區域。圖像 的大小將改變為(w, h)。 context.drawImage(img, imgx, imgy, imgw, imgh, cx, cy, cw, ch) 將一個img圖像作為繪制對象，裁剪img上位置為（imgx, imgy ）大小為（imgw, imgh）的區域，繪制在canvas內位置為（cx, cy） 處繪制大小為（cw, ch）的區域。 如果圖像上裁剪區域超出了圖像范圍，則會引發異常。 context.drawImage(video, vx, vy, vw, vh, cx, cy, cw, ch) 將一個video對象作為繪制對象，抓取video上位置為（vx, vy ）大小為（vw, vh）的一幀，在canvas上位置為（cx, cy）處繪制大 小為（cw, ch）的區域。 此外，drawImage()的第一個參數也可以是另一個 canvas。☆ context.getImageData(x, y, width, height)該方法從canvas內位置為(x, y)處，獲得大小（width, height) 一塊像素區域，返回值為一個ImageData對象。ImageData有width， height和data三個屬性。 data屬性是一個像素數組，數組中每連續的四個元素代表一個像 素，四個連續元素依次含有RGBA的顏色與透明度信息。四個連續的元 素必須屬于一個像素，第一個元素的位置不是隨意取的。 像素數組是按照從上到下，從左到右的順序在canvas中指定區域 掃描獲取。像素數組的元素個數為width * height * 4。要獲得特定 位置的像素信息。 使用了該方法的Web頁面若用瀏覽器以本地文件方式打開不會正常 工作，通常會產生安全錯誤（security error）。可以將文件上傳至 Web服務器，然后請求訪問解決此問題。并且，涉及到的圖像，JS和 HTML必須是來自同一個域名。不過，IE9可以通過本地文件訪問。 一個例子如下：
復制代碼代碼如下: //獲取一個像素區域 var imageData = context.getImageData(0, 0, 3, 3); // 3x3 grid /p p var width = imageData.width; //特定像素在像素區域的位置 var x = 2; var y = 2; //綠顏色在像素數組中對應元素的索引 var pixelRedindex = ((y-1)*(width*4))+((x-1)*4); var pixelGreenindex = pixelRedindex + 1; var pixelBlueindex = pixelRedindex + 2; var pixelAlphaindex = pixelRedindex + 3; /p p var pixel = imageData.data; // CanvasPixelArray /p p var red = pixel[pixelRedindex]; var green = pixel[pixelGreenindex]; var blue = pixel[pixelBlueindex]; var alpha = pixel[pixelAlphaindex]; ☆ context.createImageData(w, h)產生一個大小為(w, h)的ImageData對象，ImageData對象的意義 同getImageData()所獲取的ImageData對象。☆ context.putImageData(ImageData, x, y, x1, y1, w, h)將一個ImageData對象繪制到canvas上(x, y)處。后四個參數是可 選參數，用于設定一個裁剪矩形的位置和大小。☆ context.createLinearGradient(x1, y1, x2, y2)在(x1, y1)和(x2, y2)之間產生線性漸變。如：
復制代碼代碼如下: var gradientName = context.createLinearGradient(-5, -50, 5, -50); ☆ Gradient.addColorStop(offset, color)用于漸變中，在不同的位置設置漸變顏色。 The color argument is the color you want to be applied in the stroke or fill at the offset position. The offset position is a value between 0.0 and 1.0, representing how far along the gradient line the color should be reached. 如：gradientName.addColorStop(1, '#552200'); 其中color可用CSS中的rgba(r,g,b,a)函數來產生透明漸變，如：
復制代碼代碼如下: //產生50%的顏色透明漸變 gradientName.addColorStop(0.2, 'rgba(0, 0, 0, 0.5)'); ☆ context.createRadialGradient(x0, y0, r0, x1, y1, r1)在兩個圓之間產生放射漸變區域。The first three arguments represent a circle centered at (x0, y0) with radius r0, and the last three arguments represent a second circle centered at (x1, y1) with radius r1. The gradient is drawn across the area between the two circles.☆ context.createPattern(img, 'repeatPattern')用一個圖像img產生重復類型為repeatPattern的某路徑的 strokeStyle樣式或填充的fillStyle樣式。repeatPattern的值可以 取repeat、repeat-x、repeat-y和no-repeat之一。如：
