如何使用HTML5 Convas APIs

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

☆ canvas.getContext('2d')

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

☆ context.beginPath()

表示開始新的路徑繪制。

☆ context.isPointInPath(x, y)

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

☆ context.moveTo(x,y)

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

☆ context.lineTo(x, y)

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

☆ context.stroke()

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

☆ context.save()

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

☆ context.translate(x, y)

該方法將當(dāng)前坐標(biāo)原點(diǎn)移動(dòng)到(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( )

該方法有三個(gè)重載，可將圖像繪制在canvas上。圖像來源可以是
頁面中的img標(biāo)記、JS中的image對(duì)象和video的一幀。
•context.drawImage(img, x, y)
在(x, y)處用圖像img繪制圖像。當(dāng)canvas的大小大于圖像時(shí)
，整個(gè)圖像被繪制；當(dāng)圖像大于canvas時(shí)，多余的部分被裁剪。
•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)
將一個(gè)img圖像作為繪制對(duì)象，裁剪img上位置為（imgx, imgy
）大小為（imgw, imgh）的區(qū)域，繪制在canvas內(nèi)位置為（cx, cy）
處繪制大小為（cw, ch）的區(qū)域。
如果圖像上裁剪區(qū)域超出了圖像范圍，則會(huì)引發(fā)異常。
•context.drawImage(video, vx, vy, vw, vh, cx, cy, cw, ch)
將一個(gè)video對(duì)象作為繪制對(duì)象，抓取video上位置為（vx, vy
）大小為（vw, vh）的一幀，在canvas上位置為（cx, cy）處繪制大
小為（cw, ch）的區(qū)域。
此外，drawImage()的第一個(gè)參數(shù)也可以是另一個(gè) canvas。

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

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

代碼如下:

//獲取一個(gè)像素區(qū)域
var imageData = context.getImageData(0, 0, 3, 3); // 3x3
grid</p> <p>var width = imageData.width;
//特定像素在像素區(qū)域的位置
var x = 2;
var y = 2;
//綠顏色在像素?cái)?shù)組中對(duì)應(yīng)元素的索引
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)

產(chǎn)生一個(gè)大小為(w, h)的ImageData對(duì)象，ImageData對(duì)象的意義
同getImageData()所獲取的ImageData對(duì)象。

☆ context.putImageData(ImageData, x, y, x1, y1, w, h)

將一個(gè)ImageData對(duì)象繪制到canvas上(x, y)處。后四個(gè)參數(shù)是可
選參數(shù)，用于設(shè)定一個(gè)裁剪矩形的位置和大小。

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

在(x1, y1)和(x2, y2)之間產(chǎn)生線性漸變。如：

代碼如下:

var gradientName = context.createLinearGradient(-5, -50,
5, -50);

☆ Gradient.addColorStop(offset, color)

用于漸變中，在不同的位置設(shè)置漸變顏色。 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)函數(shù)來產(chǎn)生透明漸變，如：

代碼如下:

//產(chǎn)生50%的顏色透明漸變
gradientName.addColorStop(0.2, 'rgba(0, 0, 0, 0.5)');

☆ context.createRadialGradient(x0, y0, r0, x1, y1, r1)

在兩個(gè)圓之間產(chǎn)生放射漸變區(qū)域。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')

用一個(gè)圖像img產(chǎn)生重復(fù)類型為repeatPattern的某路徑的
strokeStyle樣式或填充的fillStyle樣式。repeatPattern的值可以
取repeat、repeat-x、repeat-y和no-repeat之一。如：

代碼如下:

context.strokeStyle = context.createPattern(gravel,
'repeat');

參數(shù) img 也可以是另一個(gè) canvas 或 video

☆ context.scale(xMultiple, yMultiple)

兩個(gè)參數(shù)分別指定對(duì)象在x和y方向上以后的繪制縮放倍數(shù)，大于1
為放大，0和1之間為縮小。若為負(fù)值，則可以實(shí)現(xiàn)倒影、翻轉(zhuǎn)等效果
。

☆ context.rotate(angle)

用于旋轉(zhuǎn)繪圖環(huán)境context，以當(dāng)前坐標(biāo)原點(diǎn)為按轉(zhuǎn)中心，以弧度
為單位，結(jié)合使用Math.PI。參數(shù) angle 為正值時(shí)為順時(shí)針旋轉(zhuǎn)，為
負(fù)值時(shí)按逆時(shí)針旋轉(zhuǎn)。

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

該函數(shù)用于控制繪圖對(duì)象的大小和切變和位置，是一種變換矩陣
。ScaleX 和 ScaleY 分別 x 和 y 坐標(biāo)的縮放。skewY是控制
context的垂直切變，其值可以為任意大小的正負(fù)浮點(diǎn)或整型，相當(dāng)
于對(duì)縱坐標(biāo)進(jìn)行y'= y + skewY * x。skewX是控制context的水平切
變，其值可以為任意大小的正負(fù)浮點(diǎn)或整型，相當(dāng)于對(duì)橫坐標(biāo)進(jìn)行
x'= x + skewX * y。最后兩個(gè)參數(shù)的作用相當(dāng)于translate(x, y)中
兩個(gè)參數(shù)的作用。

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

該方法類似于transform，但是transform方法會(huì)與之前已經(jīng)應(yīng)用
過的transform、scale、rotate方法效果復(fù)合，產(chǎn)生復(fù)雜的復(fù)合變換
效果。setTransform方法則會(huì)從context原始的狀態(tài)應(yīng)用變換，不會(huì)
與之前的變換復(fù)合。因此常用context.setTransform(1, 0, 0, 1,
0, 0)將context的變換狀態(tài)恢復(fù)到其原始值。

☆ fillText (text, x, y, maxwidth)

在(x, y)坐標(biāo)處繪制填充內(nèi)容為text的文本。maxwidth是可選參
數(shù)，用于限制所有文本的寬度和文本間距總和的大小，若所有和間距
的寬度超出這個(gè)值，則單個(gè)文本字符與字符間距的寬度都會(huì)被壓縮，
單個(gè)字符變得細(xì)長，間距變小?？梢越Y(jié)合context.font、
context.fillStyle、context.textAlign等屬性繪制填充文本。

☆ strokeText (text, x, y, maxwidth)

在(x, y)坐標(biāo)處繪制路徑內(nèi)容為text的文本。maxwidt是可選參
數(shù)，用于限制所有文本的寬度和文本間距總和的大小，若所有和間距
的寬度超出這個(gè)值，則單個(gè)文本字符與字符間距的寬度都會(huì)被壓縮，
單個(gè)字符變得細(xì)長，間距變小。可以結(jié)合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")

該方法根據(jù)當(dāng)前font, textAlign, 和 textBaseline 的值計(jì)算
文本所占區(qū)域的大小。text 參數(shù)是用于繪制的文本內(nèi)容。該方法
返回一個(gè) TextMetrics 對(duì)象，目前，TextMetrics 對(duì)象僅有一個(gè)
width 屬性，將來可能提供更多屬性。

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

在點(diǎn)(x, y)處繪制寬w，高h(yuǎn)的矩形。當(dāng)前點(diǎn)被忽略。但矩形繪制
完后(x, y)成為新的當(dāng)前點(diǎn)。

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

繪制圓弧。x, y是圓弧所在圓心坐標(biāo)；radius是圓弧半徑；
startAngle，endAngle分別是起始弧度和終止弧度，以弧度為單位，
圓周率&pi;用Math.PI表示，值為0的弧度是水平向右的；anticlockwise
表示繪制弧度的方向，是可選參數(shù)，布爾值，true為逆時(shí)針，false
為順時(shí)針，默認(rèn)為false。使用該方法可以省略lineTo方法。在使用
該方法繪制一段圓弧后，接下來的路徑繪制會(huì)從圓弧的結(jié)束端點(diǎn)開始
。

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

當(dāng)前點(diǎn)與(x1, y1)形成一條線L1，(x1, y1)與(x2, y2)形成另一
條線L2，當(dāng)前點(diǎn)與(x2, y2)形成第三條線L3。若以(x1, y1)為原點(diǎn)，
L1和L2為坐標(biāo)軸，與L1和L2相切的，半徑為radius，且與“線段”L3在
同一象限的圓O1上，設(shè)與L1的切點(diǎn)為p1，與L2的切點(diǎn)為p2。圓O1上p1
與p2間有兩段弧線，里原點(diǎn)(x1, y1)較近的一段?。ㄒ彩菆A上較短的
一段?。樗L制的弧線。

另外，當(dāng)前點(diǎn)與(x1, y1)之間也會(huì)繪制出一條線段與弧線相連接
，因?yàn)槁窂嚼L制是連續(xù)的，當(dāng)前點(diǎn)與(x1, y1)之間的線段先繪制，緊
接著繪制弧線。切點(diǎn)p2成為下一個(gè)當(dāng)前點(diǎn)。
該方法常用于繪制圓角矩形。

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

在當(dāng)前坐標(biāo)與(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)

在當(dāng)前點(diǎn)與(x, y)間繪制由控制點(diǎn)(cp1x, cp1y)和(cp2x, cp2y)
控制彎曲度的三次貝塞爾曲線。

☆ context.clip()

這個(gè)方法將根據(jù)上一次所繪制的閉合路徑創(chuàng)建一個(gè)剪輯區(qū)域
(clip region)。剪輯區(qū)域相當(dāng)于一個(gè)蒙版，以后繪制的內(nèi)容僅
落在剪輯區(qū)域內(nèi)的部分才會(huì)被顯示。

☆ context.isPointInPath(x, y)

檢測(cè)坐標(biāo)(x, y)是否在已繪制的路徑內(nèi)。返回值為 true 或
false。

☆ canvas.toDataURL(type, args)

該方法能夠?qū)anvas轉(zhuǎn)換為圖像，圖像是基于Base64編碼的。如
果不指定兩個(gè)參數(shù)，無參數(shù)調(diào)用該方法，轉(zhuǎn)換的圖像格式為png格式
。
&bull;type:指定要轉(zhuǎn)換的圖像格式，如 image/png、image/jpeg等。
&bull;args:可選參數(shù)。例如，如果type為image/jpeg，則args可以是
0.0和0.1之間的值，以指定圖像的品質(zhì)。
例如，下面的代碼將canvas中已繪制的內(nèi)容在一個(gè)新的瀏覽器窗
口或選項(xiàng)卡中打開：

代碼如下:

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

到此，相信大家對(duì)“如何使用HTML5 Convas APIs”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！