javascript canvas API內容整理

2024-05-06 15:44:32

字體：大中小

來源：轉載

供稿：網友

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()//創建剪裁路徑，之后繪制的路徑只有在里面的才會顯示。

上一篇：封裝一下vue中的axios示例代碼詳解

下一篇：JS通用方法觸發點擊事件代碼實例