如何使用HTML5 Convas APIs

本篇內容主要講解“如何使用HTML5 Convas APIs”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何使用HTML5 Convas APIs”吧!

☆ 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)處，獲得大小（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之一。如：

代碼如下:

context.strokeStyle = context.createPattern(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 fontSize = 100;
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分別是起始弧度和終止弧度，以弧度為單位，
圓周率&pi;用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, or angles to
determine the characteristics of the curve.

☆ 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格式
。
&bull;type:指定要轉換的圖像格式，如 image/png、image/jpeg等。
&bull;args:可選參數。例如，如果type為image/jpeg，則args可以是
0.0和0.1之間的值，以指定圖像的品質。
例如，下面的代碼將canvas中已繪制的內容在一個新的瀏覽器窗
口或選項卡中打開：

代碼如下:

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

到此，相信大家對“如何使用HTML5 Convas APIs”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！