支付寶小程序API 畫布·canvas

2020-09-14 15:15 更新

my.createCanvasContext

簡介

my.createCanvasContext 是創(chuàng)建 canvas 繪圖上下文的 API。該繪圖上下文只作用于對應(yīng) canvasId 的 canvasId 的<canvas/>

掃碼體驗

畫布.jpeg

入?yún)?/h4>
參數(shù) 類型 說明
canvasId String 定義在 <canvas/> 上的 ID。

返回值

返回值為 CanvasContext。

CanvasContext 概覽

名稱 描述
CanvasContext.addColorStop 創(chuàng)建一個圓形的漸變色。
CanvasContext.arc 畫一條弧線。
CanvasContext.beginPath 開始創(chuàng)建一個路徑，需要調(diào)用 fill 或者 stroke 才會使用路徑進行填充或描邊。
CanvasContext.bezierCurveTo 創(chuàng)建三次方貝塞爾曲線路徑。
CanvasContext.clearRect 清除畫布上在該矩形區(qū)域內(nèi)的內(nèi)容。
CanvasContext.clip 將當(dāng)前創(chuàng)建的路徑設(shè)置為當(dāng)前剪切路徑。
CanvasContext.closePath 關(guān)閉一個路徑。
CanvasContext.createCircularGradient 創(chuàng)建一個圓形的漸變色。起點在圓心，終點在圓環(huán)。
CanvasContext.createLinearGradient 創(chuàng)建一個線性的漸變色。
CanvasContext.draw 將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中。
CanvasContext.drawImage 繪制圖像，圖像保持原始尺寸。
CanvasContext.fill 對當(dāng)前路徑中的內(nèi)容進行填充。
CanvasContext.fillRect 填充矩形。
CanvasContext.fillText 在畫布上繪制被填充的文本。
CanvasContext.getImageData 獲取 canvas 區(qū)域隱含的像素數(shù)據(jù)。
CanvasContext.lineTo 增加一個新點，然后創(chuàng)建一條從上次指定點到目標點的線。
CanvasContext.measureText 測量文本尺寸信息，目前僅返回文本寬度。同步接口。
CanvasContext.moveTo 把路徑移動到畫布中的指定點，不創(chuàng)建線條。
CanvasContext.putImageData 將像素數(shù)據(jù)繪制到畫布。
CanvasContext.quadraticCurveTo 創(chuàng)建二次貝塞爾曲線路徑。
CanvasContext.rect 創(chuàng)建二次貝塞爾曲線路徑。
CanvasContext.restore 恢復(fù)之前保存的繪圖上下文。
CanvasContext.rotate 以原點為中心，原點可以用 translate 方法修改。順時針旋轉(zhuǎn)當(dāng)前坐標軸。多次調(diào)用rotate，旋轉(zhuǎn)的角度會疊加。
CanvasContext.save 保存當(dāng)前的繪圖上下文。
CanvasContext.scale 在調(diào)用scale方法后，之后創(chuàng)建的路徑其橫縱坐標會被縮放。多次調(diào)用scale，倍數(shù)會相乘。
CanvasContext.setFillStyle 設(shè)置填充色。
CanvasContext.setFontSize 設(shè)置字體大小。
CanvasContext.setGlobalAlpha 設(shè)置全局畫筆透明度。
CanvasContext.setLineCap 設(shè)置線條的端點樣式。
CanvasContext.setLineDash 設(shè)置虛線的樣式。
CanvasContext.setLineJoin 設(shè)置線條的交點樣式。
CanvasContext.setLineWidth 設(shè)置線條的寬度。
CanvasContext.setMiterLimit 設(shè)置最大斜接長度。
CanvasContext.setShadow 設(shè)置陰影樣式。
CanvasContext.setStrokeStyle 設(shè)置邊框顏色。
CanvasContext.setTextAlign Canvas 2D API 描述繪制文本時，文本的對齊方式的屬性。
CanvasContext.setTextBaseline Canvas 2D API 描述繪制文本時，當(dāng)前文本基線的屬性。
CanvasContext.setTransform 使用單位矩陣重新設(shè)置（覆蓋）當(dāng)前的變換并調(diào)用變換的方法，此變換由方法的變量進行描述。
CanvasContext.stroke 畫出當(dāng)前路徑的邊框。默認 black。
CanvasContext.strokeRect 畫一個矩形（非填充）。
CanvasContext.toDataURL 獲取畫布指定區(qū)域的 data URL數(shù)據(jù)。
CanvasContext.toTempFilePath 把當(dāng)前畫布的內(nèi)容導(dǎo)出生成圖片，并返回文件路徑。
CanvasContext.transform 使用矩陣多次疊加當(dāng)前變換的方法，矩陣由方法的參數(shù)進行描述?？梢钥s放、旋轉(zhuǎn)、移動和傾斜上下文。
CanvasContext.translate 對當(dāng)前坐標系的原點(0, 0)進行變換，默認的坐標系原點為頁面左上角。
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號