HTMLCanvasElement //canvas elem對(duì)象

屬性

height//高

width//寬

方法

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

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

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

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

繪制矩形

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

繪制文本

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

文本樣式

• canvas.font//設(shè)置字體相關(guān)樣式，包括字號(hào)，字體信息。默認(rèn)值是10px sans-serif。
• canvas.textAlign//設(shè)置文本水平對(duì)齊方式。支持屬性值有：start（默認(rèn)值），end，left，right以及center。
• canvas.textBaseline//設(shè)置文本基線對(duì)齊方式。支持屬性值有：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對(duì)象。

陰影相關(guān)

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

繪制路徑

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

線條樣式

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

位置檢測(cè)

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

變換

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

透明度和層級(jí)

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

圖片與像素

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

Canvas狀態(tài)

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

其他方法

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

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

CanvasGradient

方法

addColorStop()//給漸變?cè)黾有碌臐u變點(diǎn)

ImageBitmap

屬性

height//只讀。是無(wú)符號(hào)長(zhǎng)整數(shù)，表示ImageBitmap對(duì)象的CSS像素高度
width//只讀。是無(wú)符號(hào)長(zhǎng)整數(shù)，表示ImageBitmap對(duì)象的CSS像素寬度

方法

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

ImageData

屬性

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

TextMetrics

屬性

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

CanvasImageSource

無(wú)暴露屬性，無(wú)繼承方法。

CanvasPattern

無(wú)暴露屬性，無(wú)繼承方法。

RenderingContext

無(wú)暴露屬性，無(wú)繼承方法。

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

最新評(píng)論