javascript canvas API內容整理

HTMLCanvasElement //canvas elem對象

屬性

height//高

width//寬

方法

getContext()//獲取<canvas>相關的可繪制的上下文

toBlob()//(ie 不支持)此方法可以將<canvas>畫布轉換為base64格式的圖片數據，我們可以通過設定參數指定轉換的圖片類型，甚至圖片的清晰度

toDataURL()//可以將<canvas>畫布轉換為Blob對象

CanvasRenderingContext2D//等于 canvas.getContext('2d')對象;

繪制矩形

• canvas.clearRect()//清除指定矩形區域內部所有的像素信息為初始色（通常為透明）。
• canvas.fillRect()//矩形填充，可以填充顏色，漸變，圖案等。
• canvas.strokeRect()//矩形描邊。

繪制文本

• canvas.fillText()//文字填充，可以填充純色，漸變或者圖案。
• canvas.strokeText()//文字描邊。
• canvas.measureText()//文字測量。返回TextMetrics對象，該對象的width屬性值就是字符占據的寬度。

文本樣式

• canvas.font//設置字體相關樣式，包括字號，字體信息。默認值是10px sans-serif。
• canvas.textAlign//設置文本水平對齊方式。支持屬性值有：start（默認值），end，left，right以及center。
• canvas.textBaseline//設置文本基線對齊方式。支持屬性值有：top，hanging，middle，alphabetic（默認值），ideographic，bottom。
• canvas.direction//設置文本顯示方向。支持屬性值有：inherit（默認值），ltr和rtl。

填充和描邊

• canvas.fillStyle//填充樣式。默認值是#000000純黑色。
• canvas.fill()//填充。
• canvas.strokeStyle//描邊樣式。默認值是#000000純黑色。
• canvas.stroke()//描邊。

漸變相關

• canvas.createLinearGradient()//創建線性漸變。
• canvas.createRadialGradient()//創建徑向漸變。

圖案相關

canvas.createPattern()//創建圖案。圖案內容可以是圖片，可以是<canvas>元素，也可以是漸變。此方法返回CanvasPattern對象。

陰影相關

• canvas.shadowBlur//陰影模糊大小。默認值是0。
• canvas.shadowColor//陰影顏色。默認值是全透明黑色。
• canvas.shadowOffsetX//陰影水平偏移大小。默認值是0。
• canvas.shadowOffsetY//陰影垂直偏移大小。默認值是0。

繪制路徑

• canvas.beginPath()//開始一個新路徑。
• canvas.closePath()//閉合一個路徑。
• canvas.moveTo()//路徑繪制起始點。
• canvas.lineTo()//繪制直線到指定坐標點。
• canvas.bezierCurveTo()//繪制貝賽爾曲線到指定坐標點。
• canvas.quadraticCurveTo()//繪制二次貝賽爾曲線到指定坐標點。
• canvas.arc()//繪制圓弧（包括圓）。
• canvas.arcTo()//繪制圓弧，和之前的點以直線相連。
• canvas.rect()//繪制矩形路徑。
• canvas.ellipse()//繪制橢圓路徑。
• canvas.clip()//創建剪裁路徑，之后繪制的路徑只有在里面的才會顯示。

線條樣式

• canvas.lineWidth//線條寬度，主使用場景是描邊，默認寬度是1.0，支持小數。
• canvas.lineCap//線條端點的樣式。支持如下屬性值：butt（默認值，斷頭，無端帽），round（圓形端帽），square（方形端帽）。
• canvas.lineJoin//線條轉角的樣式。支持如下屬性值：miter（默認值，尖角），round（圓角），bevel（平角）。
• canvas.miterLimit//尖角限制比率。線條的尖角如果沒有限制，在線條粗角度小的情況下會很長很長，因此，需要一個限制比率。默認是10。
• canvas.getLineDash()//返回當前虛線數值。返回值是一個偶數個數的數組
• canvas.setLineDash()//設置線條為虛線。
• canvas.lineDashOffset//設置虛線的起始偏移。

位置檢測

• canvas.isPointInPath()//當前點是否在指定路徑內。
• canvas.isPointInStroke()//當前點是否在指定路徑描邊上。

變換

• canvas.rotate()//旋轉。
• canvas.scale()//縮放。
• canvas.translate()//位移。
• canvas.transform()//當前矩陣變換基礎上再次矩陣變換。
• canvas.setTransform()//直接重置為當前設置的矩陣變換。

透明度和層級

• canvas.globalAlpha//全局透明度。
• canvas.globalCompositeOperation//設置圖形疊加時候的混合方式，可以用來改變繪制元素上下疊加關系，也就是層級。

圖片與像素

canvas.drawImage()//圖片繪制在畫布上。
//drawImage 優化: 離屏繪制:
/* 上一節提到，繪制同樣的一塊區域，如果數據源是尺寸相仿的一張圖片，那么性能會比較好，
而如果數據源是一張大圖上的一部分，性能就會比較差，因為每一次繪制還包含了裁剪工作。也許，
我們可以先把待繪制的區域裁剪好，保存起來，這樣每次繪制時就能輕松很多。
drawImage 方法的第一個參數不僅可以接收 Image 對象，也可以接收另一個 Canvas 對象。
而且，使用 Canvas 對象繪制的開銷與使用 Image 對象的開銷幾乎完全一致。
我們只需要實現將對象繪制在一個未插入頁面的 Canvas 中，然后每一幀使用這個 Canvas 來繪制
*/
canvas.createImageData()//創建一個新的空白的ImageData對象。
canvas.getImageData()//獲取Canvas畫布的設定區域的ImageData對象。
canvas.putImageData()//給定的ImageData對象應用在Canvas畫布上。

Canvas狀態

• Canvas狀態管理幾個方法。
• canvas.save()//存儲當前Canvas的狀態。
• canvas.restore()//恢復Canvas到前一次存儲的狀態。
• canvas.canvas//反向識別當前上下文源自哪個HTMLCanvasElement。

其他方法

其他一些不常用的API方法。

• canvas.drawFocusIfNeeded()//如果給定元素被聚焦，則該方法在當前路徑周圍繪制焦點環。
• canvas.scrollPathIntoView()//將當前路徑或給定路徑滾動到視圖中。

CanvasGradient

方法

addColorStop()//給漸變增加新的漸變點

ImageBitmap

屬性

height//只讀。是無符號長整數，表示ImageBitmap對象的CSS像素高度
width//只讀。是無符號長整數，表示ImageBitmap對象的CSS像素寬度

方法

close()//處置所有與ImageBitmap關聯的圖形資源

ImageData

屬性

data//只讀。是一個包含RGBA像素信息的Uint8ClampedArray，數組中所有的值都是整數，范圍是0~255
height//只讀。是無符號長整數，表示ImageData對應的實際像素高度
width//只讀。是無符號長整數，表示ImageData對應的實際像素寬度

TextMetrics

屬性

width//只讀。表示當前文本占據的CSS像素寬度

CanvasImageSource

無暴露屬性，無繼承方法。

CanvasPattern

無暴露屬性，無繼承方法。

RenderingContext

無暴露屬性，無繼承方法。

以上就是小編整理的全部相關內容，希望能夠幫助到你。