☆ canvas.getContext('2d')

不可在convas中直接繪圖，必須用該方法獲得其二維空間繪圖上
下文。

☆ context.beginPath()

表示開始新的路徑繪制。

☆ context.isPointInPath(x, y)

判斷某個點是否在路徑上。在坐標系被轉(zhuǎn)換后該方法不適用。

☆ context.moveTo(x,y)

相當于將畫筆從畫板提起，筆尖離開畫板，然后再將筆尖定位在
(x,y)坐標處，在這個新的位置開始新的繪制。

☆ context.lineTo(x, y)

相當于畫筆筆尖不離開畫板，畫筆筆尖從當前坐標位置移動至
(x,y)坐標處，繪制一條線段。

☆ context.stroke()

在convas上繪圖后，一些繪制操作必須調(diào)用該方法才能讓繪制內(nèi)
容顯示。

☆ context.save()

該方法保存convas的當前狀態(tài)，無論以后對convas坐任何改變，
只要在做這些改變前保存convas狀態(tài)，以后就可以調(diào)用
context.restore()方法恢復(fù)到保存的這個狀態(tài)。通常在一段新繪制
或修改操作前應(yīng)該保存convas的原始狀態(tài)（沒有進行任何繪制或更改
），每次在一段新繪制或修改操作結(jié)束后在將其恢復(fù)到原始狀態(tài)。這
樣有利于以后的繪制操作。
實際上，canvas的2d繪圖環(huán)境context的許多屬性和一些方法與狀
態(tài)有關(guān)，每個屬性的值被改變（或者使用某些方法改變繪圖狀態(tài)），
繪圖狀態(tài)就改變。若在每次改變后都保存，則一個屬性的多個狀態(tài)會
以棧（stack）的形式保存，可以依照棧的順序多次調(diào)用restore()方
法來回到相應(yīng)保存的狀態(tài)。

☆ context.translate(x, y)

該方法將當前坐標原點移動到(x, y)處。

☆ context.restore()

恢復(fù)convas狀態(tài)為上一次保存的狀態(tài)。

☆ 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();

在設(shè)置填充樣式后填充閉合路徑。調(diào)用該方法后不必再調(diào)用
context.stroke()方法。

☆ context.fillRect(x, y, width, height)

在(x, y)處繪制并填充寬和長為(width, height)的矩形區(qū)域。調(diào)
用該方法后不必再調(diào)用context.stroke()方法。

☆ context.strokeRect(x, y, width, height)

在(x, y)處繪制寬和長為(width, height)的矩形輪廓。

☆ context.clearRect(x, y, width, height)

清理位置（矩形的左上角）在(x, y,)，大小為(width, height)
的矩形區(qū)域。
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)的矩形區(qū)域。圖像
的大小將改變?yōu)?w, h)。
•context.drawImage(img, imgx, imgy, imgw, imgh, cx, cy,
cw, ch)
將一個img圖像作為繪制對象，裁剪img上位置為（imgx, imgy
）大小為（imgw, imgh）的區(qū)域，繪制在canvas內(nèi)位置為（cx, cy）
處繪制大小為（cw, ch）的區(qū)域。
如果圖像上裁剪區(qū)域超出了圖像范圍，則會引發(fā)異常。
•context.drawImage(video, vx, vy, vw, vh, cx, cy, cw, ch)
將一個video對象作為繪制對象，抓取video上位置為（vx, vy
）大小為（vw, vh）的一幀，在canvas上位置為（cx, cy）處繪制大
小為（cw, ch）的區(qū)域。
此外，drawImage()的第一個參數(shù)也可以是另一個 canvas。

☆ context.getImageData(x, y, width, height)

該方法從canvas內(nèi)位置為(x, y)處，獲得大小（width, height)
一塊像素區(qū)域，返回值為一個ImageData對象。ImageData有width，
height和data三個屬性。
data屬性是一個像素數(shù)組，數(shù)組中每連續(xù)的四個元素代表一個像
素，四個連續(xù)元素依次含有RGBA的顏色與透明度信息。四個連續(xù)的元
素必須屬于一個像素，第一個元素的位置不是隨意取的。
像素數(shù)組是按照從上到下，從左到右的順序在canvas中指定區(qū)域
掃描獲取。像素數(shù)組的元素個數(shù)為width * height * 4。要獲得特定
位置的像素信息。
使用了該方法的Web頁面若用瀏覽器以本地文件方式打開不會正常
工作，通常會產(chǎn)生安全錯誤（security error）。可以將文件上傳至
Web服務(wù)器，然后請求訪問解決此問題。并且，涉及到的圖像，JS和
HTML必須是來自同一個域名。不過，IE9可以通過本地文件訪問。
一個例子如下：

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