HTML5 Convas APIs方法詳解

投稿有獎

由 金聰采編 分享 時間：2017-09-05 加入收藏 我要投稿 點贊 侵權(quán)舉報/版權(quán)申訴

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

☆ context.translate(x, y)

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

☆ context.restore()

恢復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();

在設置填充樣式后填充閉合路徑。調(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)處，獲得大?。╳idth, 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服務器，然后請求訪問解決此問題。并且，涉及到的圖像，JS和
HTML必須是來自同一個域名。不過，IE9可以通過本地文件訪問。
一個例子如下：

☆ context.createImageData(w, h)

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

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

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

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

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

☆ 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)函數(shù)來產(chǎn)生透明漸變，如：

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

在兩個圓之間產(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')

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

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

☆ context.scale(xMultiple, yMultiple)

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

☆ context.rotate(angle)

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

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

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

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

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

☆ fillText (text, x, y, maxwidth)

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

☆ strokeText (text, x, y, maxwidth)

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

☆ context.measureText("text")

該方法根據(jù)當前font, textAlign, 和 textBaseline 的值計算
文本所占區(qū)域的大小。text 參數(shù)是用于繪制的文本內(nèi)容。該方法
返回一個 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
表示繪制弧度的方向，是可選參數(shù)，布爾值，true為逆時針，false
為順時針，默認為false。使用該方法可以省略lineTo方法。在使用
該方法繪制一段圓弧后，接下來的路徑繪制會從圓弧的結(jié)束端點開始
。

☆ 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)較近的一段?。ㄒ彩菆A上較短的
一段?。樗L制的弧線。

另外，當前點與(x1, y1)之間也會繪制出一條線段與弧線相連接
，因為路徑繪制是連續(xù)的，當前點與(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()

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

☆ context.isPointInPath(x, y)

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

☆ canvas.toDataURL(type, args)

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