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的原始狀態（沒有進行任何繪制或更改）每次在一段新繪制或修改操作結束后在將其恢復到原始狀態。這樣有利于以后的繪制操作。實際上，帆布的2D繪圖環境上下文許多的屬性狀語從句：一些方法與狀態有關，每個屬性的值被改變（或者使用某些方法改變繪圖狀態），繪圖狀態就改變。若在每次改變后都保存，則一個屬性多個的狀態會以棧（堆）的形式保存，可以依照棧的順序多次調用恢復（）方行業釋義法律來回到相應保存的狀態。

☆context.translate（x，y）

該方法將當前坐標原點移動到（x，y）處。

☆context.restore（）

恢復convas狀態為上一次保存的狀態。

☆context.closePath（）

此命令的行為與lineTo函數非常相似，不同之處在于，自動將目的地視為路徑的起點。但是，closePath還會通知畫布當前形狀已關閉或形成了一個完全包含的區域。這對于將來的填充和描邊很有用。此時，您可以繼續在路徑中繼續使用更多的段來創建其他子路徑?；蛘?，您可以隨時使用beginPath重新開始并完全清除路徑列表。

☆context.fill（）;

在設置填充樣式后填充封閉路徑。調用該方法后不必再調用context.stroke（）方法。

☆context.fillRect（x，y，寬度，高度）

在（X，Y）處繪制并填充寬和長為（寬度，高度）的矩形區域。調用該方法后不必再調用context.stroke（）方法。

☆context.strokeRect（x，y，width，height）

在（x，y）處布局寬和長為（width，height）的矩形輪廓。

☆context.clearRect（x，y，width，height）

清除矩形區域中的所有內容并將其重置為其原始的透明顏色。清除位置（矩形的左上角）在（x，y，），大小為（寬度，高度）的矩形區域。清除畫布中矩形的功能是使用HTML5 Canvas API創建動畫和游戲的核心。通過重復繪制和清除畫布的各個部分，可以呈現動畫的幻覺，并且Web上已經存在許多這樣的示例。但是，要創建平滑運行的動畫，您將需要利用剪切功能，甚至可能需要輔助緩沖的畫布，以最大程度地減少頻繁清除畫布所引起的閃爍。

☆context.drawImage（）

•context.drawImage（img，x，y）在（x上，該方法有三個重載，可將圖像放置在畫布上。圖像來源可以是頁面中的img標記，JS中的圖像對象和視頻的一幀。•context.drawImage（img，x，y，w，h），則y）處使用圖像img圖像。當畫布的大小大于圖像時，整個圖像被布局；當圖像大于canvas時，多余的部分被裁剪。在（x，y）處用圖像img長和寬為（w，h）的矩形區域。圖像的大小將改變為（w，h）。•context.drawImage（img，imgx，imgy，imgw，imgh ，cx，cy，cw，ch）將一個img圖像作為布局對象，裁剪img上位置為（imgx，imgy ）大小為（imgw，imgh）的區域，放置在畫布內部位置為（cx，cy）處位置•context.drawImage（視頻，vx，vy，vw，vh，cx，cy，cw，ch）將是一個（大小為（cw，ch）的區域。如果圖像上裁切區域超出了圖像范圍，則引發異常。視頻對象作為繪制對象，抓取視頻上位置為（VX，VY ）大小為（VW，VH）的一幀，在畫布上位置為（CX，CY）繪制處大小為（CW，CH）的區域。，， drawImage（）的第一個參數也可以是另一個canvas。

☆context.getImageData（x，y，width，height）

該方法從畫布內部位置為（x，y）處，獲得大?。▽挾?，高度）一塊區域，返回返回一個ImageData對象。ImageData有寬度，高度和數據三個屬性。data屬性是一個數組，中數組每連續的四個元素代表一個像素，四個連續元素依次含有RGBA的顏色與透明度信息。連續四個的元型態素必須屬于一個像素，第一個元素的位置不是隨意取的。像素數組是按照從上到下，從左到右的順序在畫布中指定區域掃描獲取。依次排列的元素個數為寬度*高度*4。要獲得特定位置的提示信息。使用了該方法的網頁用瀏覽器以本地文件方式打開不會正常工作，通常會產生安全錯誤（安全錯誤）?？梢詫⑽募蟼髦罻eb服務器，然后請求訪問解決此問題。并且，涉及到的圖像，JS和HTML必須是不過，IE9可以通過本地文件訪問。一個示例如下：

復制代碼

代碼如下：

//獲取一個預期區域var imageData = context.getImageData（0，0，3，3 ）; // 3x3網格</ 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對象繪制到畫布上（X，Y）處。四個后的英文參數柯林斯選參數，用于設定一個裁剪矩形的位置和大小。

☆context.createLinearGradient（x1，y1，x2，y2）

在（x1，y1）和（x2，y2）之間產生線性垂直。如：

復制代碼

代碼如下：

var gradientName = context.createLinearGradient（-5，-50，5 ，-50）;

☆Gradient.addColorStop（偏移量，顏色）

color參數是要在筆觸中應用的顏色，或要在偏移位置填充的顏色。偏移位置的值介于0.0到1.0之間，代表應沿著漸變線到達顏色的距離。如：

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）

前三個參數代表一個半徑為r0的以（x0，y0）為中心的圓，最后三個參數代表一個半徑為r1的以（x1，y1）為中心的第二圓?？鐑蓚€圓之間的區域繪制漸變。

☆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（角度）

用于旋轉繪圖環境的上下文，以當前坐標原點為按轉中心，以弧度為單位，結合使用Math.PI。參數angle為正值時為順時針旋轉，為負值時按逆時針旋轉。

☆context.transform（ScaleX，skewY，skewX，ScaleY，transX ，transY）

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

☆context.setTransform（ScaleX，skewY，skewX，ScaleY，transX，transY）

該方法可以轉換，但是轉換方法會與之前已經應用過的轉換，縮放，旋轉方法效果復合，產生復雜的復合轉換效果。setTransform方法可以從上下文原始的狀態應用轉換，不會與之前的轉換因此。通用context.setTransform（1、0、0、1、0、0）將上下文的變換狀態恢復到其原始值。

☆fillText（文字，x，y，最大寬度）

在（X，Y）坐標處繪制填充內容為文本的文本.maxwidth可選的英文參數，用于限制所有文本的寬度和文本間距總和的大小，所有若狀語從句：間距的寬度超出這個值，則單個文本字符與字符間距的寬度都會被壓縮，單個字符變得細長，間距變小?？梢越Y合context.font，context.fillStyle，context.textAlign等屬性繪制填充文本。

☆strokeText（文本，x，y，最大寬度）

在（X，Y）坐標處繪制路徑內容為文本的文本.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（“字體大小為” + fontSize +“ px”，10，50）;

☆context.measureText（“ text”）

該方法根據當前字體，textAlign和textBaseline的值計算文本所占區域的大小。text方法是用于放置的文本內容。該方法返回一個TextMetrics對象，目前，TextMetrics對象只有一個寬度屬性，將來可能提供更多屬性。

☆context.rect（x，y，w，h）

在點（x，y）處放置寬w，高h的矩形。當前點被忽略。但矩形頂部對齊后（x，y）成為新的當前點。

☆context.arc（x，y，radius，startAngle，endAngle，逆時針）

x，y是圓弧所在的圓心坐標； radius是圓弧半徑；startAngle，endAngle分別是起始弧度和終止弧度，以弧度為單位，長度率&pi;用Math.PI表示，變量0的弧度是水平向右的;逆時針表示繪制弧度的方向，是可選參數，布爾值，真正為逆時針，假的。為順時針，默認為假使用該方法可以省略了lineTo在方法使用該方法繪制一段圓弧后，接下來的路徑轉向會從圓弧的結束端點開始。

☆context.arcTo（x1，y1，x2，y2，半徑）

當前點與（X1，Y1）形成一條線L1，（X1，Y1）與（X2，Y2）另一形成條線L2，當前點與（X2，Y2）形成第三條線L3若以。（X1 ，y1）為原點，L1和L2為坐標軸，與L1和L2相切的，半徑為半徑，且與“線段” L3在同一象限的圓O1上，設與L1的切點為p1，與L2圓O1上p1與p2間有兩段弧線，里原點（x1，y1）較近的一段?。ㄒ彩菆A上允許的一段?。樗胖玫幕【€。

另外，當前點與（X1，Y1）之間也會繪制出一條線段與弧線相連接，因為路徑繪制是連續的，當前點與（X1，Y1）之間的線段先繪制，緊接著繪制弧線。切點p2成為下一個當前點。該方法常用于繪制圓角矩形。

☆context.quadraticCurveTo（x1，y1，x2，y2）

在當前坐標與（x2，y2）放置一條二次貝塞爾曲線段，彎曲度由（x1，y1）控制。（x1，y1）不在曲線段上。

HTML5 Canvas API中曲線的其他選項包括bezierCurveTo，arcTo和arc函數。這些曲線采用其他控制點，半徑或角度來確定曲線的特性。

☆context.bezierCurveTo（cp1x，cp1y，cp2x，cp2y，x，y）

在當前點與（x，y）間放置由控制點（cp1x，cp1y）和（cp2x，cp2y）控制彎曲度的三次貝塞爾曲線。

☆context.clip（）

這個方法將根據上一次所放置的替換路徑創建一個剪輯區域（剪輯區域）。剪輯區域相當于一個蒙版，之后替換的內容僅落在剪輯區域內部的部分就會被顯示。

☆context.isPointInPath（x，y）

檢測坐標（x，y）是否在已取代的路徑內部。返回稱為true或false。

☆canvas.toDataURL（type，args）

該方法能夠將畫布轉換為圖像，圖像是基于的Base64編碼的如。果不指定兩個參數，無參數調用該方法，轉換的圖像格式為PNG格式。&bull;類型：指定要轉換的圖像格式，如圖像/ png，image / jpeg等。&bull;args：可選參數。例如，如果type為image / jpeg，則args可以是0.0和0.1之間的值，以指定圖像的品質。例如，下面的代碼將畫布中繪制已的內容在一個新的瀏覽器窗口或選項對話卡中打開：

復制代碼

代碼如下：

var canvas = document.getElementById（“ myCanvas”）; window.open（canvas.toDataURL（“ image / png”））;

關于“HTML5的Convas APIs方法怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“HTML5的Convas APIs方法怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。