☆ 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 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)處，獲得大?。╳idth, height) 
一塊像素區域，返回值為一個ImageData對象。ImageData有width， 
height和data三個屬性。
data屬性是一個像素數組，數組中每連續的四個元素代表一個像 
素，四個連續元素依次含有RGBA的顏色與透明度信息。四個連續的元 
素必須屬于一個像素，第一個元素的位置不是隨意取的。
像素數組是按照從上到下，從左到右的順序在canvas中指定區域 
掃描獲取。像素數組的元素個數為width * height * 4。要獲得特定 
位置的像素信息。
使用了該方法的Web頁面若用瀏覽器以本地文件方式打開不會正常 
工作，通常會產生安全錯誤（security error）?？梢詫⑽募蟼髦?nbsp;
Web服務器，然后請求訪問解決此問題。并且，涉及到的圖像，JS和 
HTML必須是來自同一個域名。不過，IE9可以通過本地文件訪問。
一個例子如下：
 

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表