canvas繪圖API詳解

canvas繪圖API詳解

1.context的狀態

• 矩陣變換屬性

• 當前剪輯區域

• context的其餘狀態屬性：

strokeStyle, fillStyle, globalAlpha, 
lineWidth,lineCap, lineJoin, 
miterLimit,shadowOffsetX, shadowOffsetY,
shadowBlur, shadowColor,
globalCompositeOperation,font, 
textAlign, textBaseline.

• 相關方法

  • save() 保存當前繪圖對象狀態，

  • restore() 恢復以前保存的繪圖對象的狀態

2.路徑規劃

路徑規劃函數在使用的時候，都要保證存在一個子路徑，好比調用過moveTo(), 由於要指定了起點才能繪製。

• moveTo(x,y) : 用給定的點建立一個新的子路徑。將畫筆移動到某一個位置

• closePath() : 標記爲當前路徑結束

• lineTo(x,y) 將畫筆移動到某一個點，與上一個點相鏈接

• quadraticCurveTo(cpx, cpy, x, y) 規劃貝塞爾二次曲線，前兩個點是控制點x、y座標，後兩個是終點的x、y座標

• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 規劃貝塞爾三次曲線，與二次曲線不一樣的是，有兩個控制點，繪製曲線更加靈活

• arcTo(x1, y1, x2, y2, radius) 給出一個控制點和終點，畫一個與 用起點與控制點、控制點與終點造成的折線相切的圓弧。開始繪製的點不必定是起點，結束繪製的點也不必定是終點

• arc(x, y, radius, startAngle, endAngle [, counterclockwise ] ) 指定圓心、其實弧度、結束弧度以及半徑，繪製一點圓弧，最後一個可選參數爲繪製方向，表示順時針繪製仍是逆時針繪製

• rect(x, y, w, h) 繪製一個矩形

3.路徑繪製

• beginPath() ：重置路徑，開始一段新路徑

  設置了繪製路徑，context都會保持context的狀態，只能經過beginPath方法來重置路徑。

• fill() ：定義好繪製路徑後，使用指定的fillStyle來填充閉合路徑

• stroke() ：定義好繪製路徑後，使用指定的strokeStyle來畫線繪製

• drawFocusIfNeeded(element) ：若是給定的元素獲取到了焦點，則給當前的路徑繪製焦點

• clip() ：把當前路徑限制到剪輯區域中。

  與路徑規劃函數等配合使用，將路徑剪輯爲特定的繪製區域，在clip以後繪製的圖形只會顯示在這個區域中。

• isPointInPath(x, y) ：判斷某一個點是否在當前路徑中。

4.填充和繪製樣式

• fillStyle 能夠返回或者設置填充的樣式

這裏的樣式能夠是一個cssstyle字符串，漸變色對象，canvasPattern（圖片、視頻或者canvasElement），無效的參數值將被忽略。

• strokeStyle 能夠返回或者設置畫線的樣式

這裏的樣式能夠是一個cssstyle字符串，漸變色對象，canvasPattern（圖片、視頻或者canvasElement），無效的參數值將被忽略。

• gradient

• gradient = context.createLinearGradient(x0, y0, x1, y1) 建立一個線性漸變，參數爲起止點的座標

• gradient.addColorStop(offset, color) 添加一個漸變轉折點，能夠添加多個

• gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1) 建立一個徑向漸變，參數爲內圓和外圓的圓心座標和半徑

• context.fillStyle=gradient 設置填充樣式爲指定的漸變樣式

• pattern

• pattern = context.createPattern(image, repetition) 建立一個圖像pattern，第二個參數爲repeat方式，可選值與css背景repeat相似。

• context.fillStyle=pattern 設置填充樣式爲指定的pattern

5.lineStyles

都是以屬性賦值的方式設置對應的狀態,例如:context.lineWidth=5;

• lineWidth 設置線條寬度

• lineCap 設置線條末端樣式

  默認值是butt（左一），round是圓角， square是方角
  

• lineJoin 設置兩線段鏈接處所顯示的樣子

  round, bevel 和 miter。默認是 miter。如圖從上到下分別爲round，bevel和miter
  

• miterLimit 用來設定外延交點與鏈接點的最大距離，若是交點距離大於此值，鏈接效果會變成了 bevel

  所謂交接處長度（斜接長度）是指線條交接處內角頂點到外角頂點的長度

• setLineDash(segments) 設置當前虛線樣式

• getLineDash 返回一個包含當前虛線樣式，長度爲非負偶數的數組。

• lineDashOffset 設置虛線樣式的起始偏移量

6.Text styles

• font 獲取或者設置字體樣式，設置的值爲css樣式字符串。默認值是10px sans-serif

• textAlign 設置或者獲取文本的左右對齊方式

  start,end,left,right,center.默認爲start

• textBaseline 設置或者獲取文本的垂直對齊方式

  "top", "hanging", "middle", "alphabetic", "ideographic", or "bottom" 默認爲alphabetic

7.Transformations

• scale(x,y) 設置x，y方向的縮放

• rotate(angle) 設置旋轉角度

• translate(x,y) 設置x，y方向的位移

• transform(a,b,c,d,e,f) a 水平縮放 d 垂直縮放 b 水平傾斜 c 垂直傾斜 e 水平位移 f 垂直位移

• setTransform(a,b,c,d,e,f) 重置當前transform，並設置爲新的transform變換

8.繪製文字

• fillText(text,x,y,[maxWidth]) 使用設置好的文字填充狀態繪製文字到指定的座標 位置

• strokeText(text,x,y,[maxWidth]) 使用設置好的文字繪製狀態繪製文字到指定的座標 位置

• measureText(text) 測量文字實際的長度

  var width=cotext.measureText('hello').width; 目前只能獲取到文字實際佔用的寬度,必須使用其width屬性

9.繪製圖像

• drawImage(image, dx, dy) 繪製一個圖像到畫布上，dx、dy爲圖像左上角的x、y座標

• drawImage(image, dx, dy, dw, dh) 繪製一個圖像到畫布上，dx、dy爲圖像左上角的x、y座標，dw、dh爲繪製到畫布實際佔用的寬高

• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 繪製一個圖像到畫布上，dx、dy爲圖像左上角的x、y座標，dw、dh爲繪製到畫布實際佔用的寬高，sw、sh爲原始圖像的寬高,sx,sy爲原始圖像左上角在原圖中的座標位置。 在作圖像的縮放繪製時候也要用到
  

10.繪製矩形

• clearRect(x, y, w, h) 清除某一矩形區域內的內容，經常使用在動畫製做中避免疊加，重複繪製

• fillRect(x, y, w, h) 用context狀態填充一個矩形

• strokeRect(x, y, w, h) 用context狀態繪製一個空心矩形

11.陰影

• shadowColor 設置或者獲取context陰影顏色

• shadowOffsetX 設置或者獲取陰影X方向偏移量

• shadowOffsetY 設置或者獲取陰影Y方向偏移量

• shadowBlur 設置陰影模糊級別

若是要給多邊形設置陰影，則要注意多邊形或者圓環等圖形的畫筆繪製方向，只有多邊形外部的才能增長陰影，而一個區域是否在多邊形外部是與從其中引出的射線與兩線相交出方向是否相反有關（數學知識）

12.Compositing 圖像合成處理

• globalAlpha 設置或者返回全局不透明度的值，介於0.0-1.0之間，這個區域外的值將被忽略

• globalCompositeOperation 這個值定義了兩個圖形相交的時候怎麼處理相交部分和各自單獨部分。
  

source-over    默認。在目標圖像上顯示源圖像。
source-atop    在目標圖像頂部顯示源圖像。源圖像位於目標圖像以外的部分是不可見的。
source-in    在目標圖像中顯示源圖像。只有目標圖像內的源圖像部分會顯示，目標圖像是透明的。
source-out    在目標圖像以外顯示源圖像。只會顯示目標圖像以外源圖像部分，目標圖像是透明的。
destination-over    在源圖像上方顯示目標圖像。
destination-atop    在源圖像頂部顯示目標圖像。源圖像以外的目標圖像部分不會被顯示。
destination-in    在源圖像中顯示目標圖像。只有源圖像內的目標圖像部分會被顯示，源圖像是透明的。
destination-out    在源圖像外顯示目標圖像。只有源圖像外的目標圖像部分會被顯示，源圖像是透明的。
lighter    顯示源圖像 + 目標圖像。
copy    顯示源圖像。忽略目標圖像。
xor    使用異或操做對源圖像與目標圖像進行組合。

13.imageData處理

• imagedata = context . createImageData(sw, sh) 建立一個imagedata，參數爲寬高值

• imagedata = context . createImageData(imagedata) 建立一個imagedata，參數爲已建立的一個imagedata

• imagedata = context . getImageData(sx, sy, sw, sh) 獲取某一點處指定寬高的像素信息

  imagedata中包含width、height和data屬性，data中保存着像素信息，是一個一位數組，每四個元素是一個像素的信息，四個元素分別保存這r、g、b、a的值。能夠對imagedata中的像素值作處理，以實現對圖片進行像素級的處理來實現各類濾鏡或者其餘的效果

• context . putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ]) 使用給定的imagedata來將imagedata的所有像素信息繪製在畫布上造成一個圖像。

  • dx
    源圖像數據在目標畫布中的位置偏移量（x 軸方向的偏移量）。

  • dy
    源圖像數據在目標畫布中的位置偏移量（y 軸方向的偏移量）。

  • dirtyX [可選]
    在源圖像數據中，矩形區域左上角X方向的位置。默認是整個圖像數據的左上角（x 座標）。

  • dirtyY [可選]
    在源圖像數據中，矩形區域左上角Y方向的位置。默認是整個圖像數據的左上角（y 座標）。

  • dirtyWidth [可選]
    在源圖像數據中，矩形區域的寬度。默認是圖像數據的寬度。

  • dirtyHeight [可選]
    在源圖像數據中，矩形區域的高度。默認是圖像數據的高度。

14.點擊區域

• 在當前路徑下添加一個點擊區域

• 若是添加了點擊區域，能夠給canvas添加一個dom事件監聽，在事件處理函數的event參數中能夠獲取到event.region屬性。

• 這個api目前沒有獲得良好支持不能在生產環境使用。

• （1）addHitRegion(options) 給位圖添加點擊區域。它容許你很容易地實現一個點擊區域，讓你觸發DOM元素的事件。options 參數是可選的。 當賦值時， Object 包含如下屬性：

• • pathPath2D 對象： 描述點擊區的區域範圍。 若是不給此屬性賦值， 則會使用當前的路徑。

  • fillRule：
    遵循的填充規則（默認是「nonzero」）。

• id 點擊區的ID，在事件中能夠引用此ID，就像示例中那樣。

• parentID 父區域的ID，爲了光標回退或者輔助工具導航 。

• cursor 鼠標移動到點擊區時的 cursor （默認是 "inherit"）。 繼承父點擊區域的光標，或者canvas元素的光標。

• control 觸發事件的元素（canvas的子孫元素）。 默認爲 null。

• label 若是沒有control屬性，文本標籤做爲輔助工具，用做點擊區域的描述。 默認爲 null。

• role 若是沒有control屬性，ARIA role 做爲輔助工具，決定如何表示點擊區域。 默認爲 null.

• （2）removeHitRegion(id) 移除點擊區域，參數爲addHitRegon時傳入的id

• （3）clearHitRegions() 清除畫布上的全部點擊區域