javascript canvas API內(nèi)容整理

HTMLCanvasElement //canvas elem對象

屬性

height//高

width//寬

方法

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

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

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

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

繪制矩形

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

繪制文本

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

文本樣式

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

填充和描邊

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

漸變相關(guān)

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

圖案相關(guān)

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

陰影相關(guān)

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

繪制路徑

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

線條樣式

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

位置檢測

• canvas.isPointInPath()//當(dāng)前點是否在指定路徑內(nèi)。
• canvas.isPointInStroke()//當(dāng)前點是否在指定路徑描邊上。

變換

• canvas.rotate()//旋轉(zhuǎn)。
• canvas.scale()//縮放。
• canvas.translate()//位移。
• canvas.transform()//當(dāng)前矩陣變換基礎(chǔ)上再次矩陣變換。
• canvas.setTransform()//直接重置為當(dāng)前設(shè)置的矩陣變換。

透明度和層級

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

圖片與像素

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

Canvas狀態(tài)

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

其他方法

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

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

CanvasGradient

方法

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

ImageBitmap

屬性

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

方法

close()//處置所有與ImageBitmap關(guān)聯(lián)的圖形資源

ImageData

屬性

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

TextMetrics

屬性

width//只讀。表示當(dāng)前文本占據(jù)的CSS像素寬度

CanvasImageSource

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

CanvasPattern

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

RenderingContext

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

以上就是小編整理的全部相關(guān)內(nèi)容，希望能夠幫助到你。