HTML5 Convas APIs方法詳解_html5教學技巧

☆ 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 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 egments.
At this point, you are free to continue with egments 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 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. Howperat, to s 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

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;

var pixel = imageData.data; // CanvasPixelArray

var red = pixel[pixelRedindex];

var green = pixel[pixelGreenindex]; var blue = pixel[pixelBlueindex]; var alpha = pixel[pixelAlphaindex];

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 gradi -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, represing how farween 0.0 and 1.0, >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) The griusius ris 1. drawn across the
area between the two circles.

☆ context.createPattern(img, 'repeatPattern')

用一個圖像img產生重複類型為repeatPattern的某路徑的
strokeStyle樣式或填滿的fillStyle樣式。 repeatPattern的值可以
取repeat、repeat-x、repeat-y和no-repeat之一。如：

複製程式碼

程式碼如下:

Pattext.strokestrokeScream. (gravel,
'repeat');

參數 img 也可以是另一個 canvas 或 video

☆ context.scale(xMultiple, yMultiple)

兩個參數分別指定物件在x和y方向上以後的繪製縮放倍數，大於1
為放大，0和1之間為縮小。若為負值，則可實現倒影、翻轉等效果
。

☆ context.rotate(angle)

用於旋轉繪圖環境context，以目前座標原點為按轉中心，以弧度
為單位，結合使用Math.PI。參數 angle 為正值時為順時針旋轉，為
負值時按逆時針旋轉。

☆ context.transform(ScaleX, skewY, skewX, ScaleY, transX,
transY)

此函數用於控制繪圖物件的大小和切變和位置，是一種變換矩陣
。 ScaleX 和 ScaleY 分別為 x 和 y 座標的縮放。 skewY是控制
context的垂直切變，其值可以為任意大小的正負浮點或整型，相當
於對縱坐標進行y'= y skewY * x。 skewX是控制context的水平切
變，其值可以為任意大小的正負浮點或整型，相當於對橫坐標進行
x'= x skewX * y。最後兩個參數的作用相當於translate(x, y)中
兩個參數的作用。

☆ context.setTransform(ScaleX, skewY, skewX, ScaleY,
transX, transY)

此方法類似transform，但transform方法會與先前已套用
過的transform、scale、rotate方法效果複合，產生複雜的複合變換
效果。 setTransform方法則會從context原始的狀態套用變換，不會
與先前的變換複合。因此常用context.setTransform(1, 0, 0, 1,
0, 0)將context的變換狀態恢復到原始值。

☆ fillText (text, x, y, maxwidth)

在(x, y)座標處繪製填滿內容為text的文字。 maxwidth是可選參
數，用於限制所有文字的寬度和文字間距總和的大小，若所有和間距
的寬度超出這個值，則單一文字字元與字元間距的寬度都會被壓縮，
單一字元變得細長，間距變小。可以結合context.font、
context.fillStyle、context.textAlign等屬性繪製填充文字。

☆ strokeText (text, x, y, maxwidth)

在(x, y)座標處繪製路徑內容為text的文字。 maxwidt是可選參
數，用於限制所有文本的寬度和文本間距總和的大小，若所有和間距
的寬度超出這個值，則單個文本字符與字符間距的寬度都會被壓縮，
單一字元變得細長，間距變小。可以結合context.font、
context.textAlign、context.lineWidth、context.strokeStyle等
屬性繪製路徑文字。
例如：

複製程式碼

程式碼如下:

程式碼如下:


var 0Size = 100Size ;
context.font = fontSize "px Arial";
while(context.measureText("Hello world!").width > 140)
{
fontSize--;
context. font = fontSize "px Arial";

}context.fillText("Hello world!", 10, 10);context.fillText("Font size is " fontSize "px", 10, 50 );

☆ context.measureText("text")

此方法根據目前font, textAlign, 和 textBaseline 的值計算
文字所佔區域的大小。 text 參數是用於繪製的文字內容。此方法
傳回一個 TextMetrics 對象，目前，TextMetrics 物件僅有一個
width 屬性，未來可能提供更多屬性。

☆ context.rect(x, y, w, h)

在點(x, y)處繪製寬w，高h的矩形。當前點被忽略。但矩形繪製
完後(x, y)成為新的當前點。

☆ context.arc(x, y, radius, startAngle, endAngle,
anticlockwise)

繪製圓弧。 x, y是圓弧所在圓心座標；radius是圓弧半徑；
startAngle，endAngle分別是起始弧度和終止弧度，以弧度為單位，
圓周率π用Math.PI表示，值為0的弧度是水平向右的；anticlockwise
表示繪製弧度的方向，是可選參數，布林值，true為逆時針，false
為順時針，預設為false。使用此方法可以省略lineTo方法。使用
此方法繪製一段圓弧後，接下來的路徑繪製會從圓弧的結束端點開始
。

☆ context.arcTo(x1, y1, x2, y2, radius)

當前點與(x1, y1)形成一條線L1，(x1, y1)與(x2, y2)形成另一
條線L2，當前點與(x2, y2)形成第三條線L3。若以(x1, y1)為原點，
L1和L2為座標軸，與L1和L2相切的，半徑為radius，且與「線段」L3在
同一象限的圓O1上，設與L1的切點為p1，與L2的切點為p2。圓O1上p1
與p2間有兩段弧線，裡原點(x1, y1)較近的一段弧（也是圓上較短的
一段弧）為所繪製的弧線。

另外，目前點與(x1, y1)之間也會繪製出一條線段與弧線相連接
，因為路徑繪製是連續的，當前點與(x1, y1)之間的線段先繪製，緊緊
接著繪製弧線。切點p2成為下一個當前點。
此方法常用於繪製圓角矩形。

☆ context.quadraticCurveTo(x1, y1, x2, y2)

在目前座標與(x2, y2)繪製一條二次貝塞爾曲線段，彎曲度由
(x1, y1)控制。 (x1, y1)不在曲線段上。

Other options for curves in the HTML5 Canvas API include
the bezierCurveTo, arcTo, and arc functions. These curves
take additional control points,a radius, orles tocurius. .

☆ context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

在當前點與(x, y)間繪製由控制點(cp1x, cp1y)和(cp2x, cp2y)

控制彎曲度的三次貝塞爾曲線。

☆ context.clip()

這個方法將根據上一次所繪製的閉合路徑建立一個剪輯區域

(clip region)。剪輯區域相當於一個蒙版，以後繪製的內容只
落在剪輯區域內的部分才會被顯示。

☆ context.isPointInPath(x, y)

偵測座標(x, y)是否在已繪製的路徑內。傳回值為 true 或

false。

☆ canvas.toDataURL(type, args)

此方法能夠將canvas轉換為影像，影像是基於Base64編碼的。如

果實不指定兩個參數，無參數呼叫此方法，轉換的影像格式為png格式
。
•type:指定要轉換的影像格式，如 image/png、image/jpeg等。
•args:可選參數。例如，如果type為image/jpeg，則args可以是
0.0和0.1之間的值，以指定影像的品質。
例如，下面的程式碼將canvas中已繪製的內容在一個新的瀏覽器視窗
口或標籤中開啟：

複製程式碼程式碼如下:

var canvas = document.getElementById("myCanvas");
window.open(canvas.toDataURL("image/png "));