javascript canvas API內容整理

更新時間：2020年02月16日 16:44:34 作者：weihexin

在本篇文章里小編給大家分享的是關于javascript canvas API內容整理，有需要的朋友們可以跟著學習參考下。

HTMLCanvasElement //canvas elem對象

屬性

height//高

width//寬

方法

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

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

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

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

繪制矩形

canvas.clearRect()//清除指定矩形區(qū)域內部所有的像素信息為初始色（通常為透明）。
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()//創(chuàng)建線性漸變。
canvas.createRadialGradient()//創(chuàng)建徑向漸變。

圖案相關

canvas.createPattern()//創(chuàng)建圖案。圖案內容可以是圖片，可以是<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()//繪制圓?。ò▓A）。
canvas.arcTo()//繪制圓弧，和之前的點以直線相連。
canvas.rect()//繪制矩形路徑。
canvas.ellipse()//繪制橢圓路徑。
canvas.clip()//創(chuàng)建剪裁路徑，之后繪制的路徑只有在里面的才會顯示。

線條樣式

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

Canvas狀態(tài)