快應用 canvas組件

概述

畫布組件，通過使用 JavaScript 中的腳本，可以在 canvas 上繪制圖形，制作照片，創(chuàng)建動畫等。

子組件

不支持

屬性

支持 通用屬性

樣式

支持 通用樣式

事件

支持 通用事件

方法

canvas.toTempFilePath(Object object)

把當前畫布指定區(qū)域的內容導出生成指定大小的圖片。

參數(shù)

Object object

屬性	類型	默認值	必填	描述
x	number	0	否	指定的畫布區(qū)域的左上角橫坐標
y	number	0	否	指定的畫布區(qū)域的左上角縱坐標
width	number	canvas 寬度-x	否	指定的畫布區(qū)域的寬度
height	number	canvas 高度-y	否	指定的畫布區(qū)域的高度
destWidth	number	width*屏幕像素密度	否	輸出的圖片的寬度
destHeight	number	height*屏幕像素密度	否	輸出的圖片的高度
fileType	string	png	否	目標文件的類型
quality	number	1.0	否	圖片的質量，目前僅對 jpg 有效。取值范圍為 (0, 1]，不在范圍內時當作 1.0 處理。
success	function		否	接口調用成功的回調函數(shù)
fail	function		否	接口調用失敗的回調函數(shù)
complete	function		否	接口調用結束的回調函數(shù)（調用成功、失敗都會執(zhí)行）

object.fileType 的合法值

值	描述
jpg	jpg 圖片
png	png 圖片

object.success 回調函數(shù)

參數(shù)

Object res

屬性	類型	描述	備注
uri deprecated	string	生成文件的路徑	使用tempFilePath代替
tempFilePath	string	生成文件的路徑

示例代碼

// ...
onShow() {
  this.$element('canvas').toTempFilePath({
    x: 50,
    y: 50,
    width: 350,
    height: 350,
    destWidth: 200,
    destHeight: 200,
    fileType: 'png',
    quality: 0.5,
    success: (res) => {
      this.imageUrl = res.tempFilePath
    },
    fail: (err, code) => {
      prompt.showToast({
        message: `錯誤原因：${err}, 錯誤代碼：${code}`
      })
    }
  })
}
// ...

canvas.getContext()

創(chuàng)建 canvas 繪圖上下文

參數(shù)

參數(shù)	類型	描述
contextType	<string>	目前支持傳入'2d'

返回值

參數(shù)	類型	描述
'2d'	CanvasRenderingContext2D	返回一個 CanvasRenderingContext2D 對象，用于 2D 繪制

示例

var canvas = this.$element('canvasid');
var ctx = canvas.getContext('2d');

CanvasRenderingContext2D

概述

通過 CanvasRenderingContext2D 可以在 canvas 上繪制矩形、文本、圖片和其他對象?？梢栽?canvas 上調用 getContext('2d') 來獲取 CanvasRenderingContext2D 的對象。

方法和屬性

繪制矩形

CanvasRenderingContext2D.clearRect()

清除畫布上在該矩形區(qū)域內的內容

語法

ctx.clearRect(x, y, width, height);

參數(shù)

參數(shù)	類型	描述
x	<number>	矩形區(qū)域左上角的 x 坐標
y	<number>	矩形區(qū)域左上角的 y 坐標
width	<number>	矩形區(qū)域的寬度
height	<number>	矩形區(qū)域的高度

CanvasRenderingContext2D.fillRect()

填充一個矩形

語法

ctx.fillRect(x, y, width, height);

參數(shù)

參數(shù)	類型	描述
x	<number>	矩形路徑左上角的 x 坐標
y	<number>	矩形路徑左上角的 y 坐標
width	<number>	矩形路徑的寬度
height	<number>	矩形路徑的高度

CanvasRenderingContext2D.strokeRect()

畫一個非填充矩形

語法

ctx.strokeRect(x, y, width, height);

參數(shù)

參數(shù)	類型	描述
x	<number>	矩形路徑左上角的 x 坐標
y	<number>	矩形路徑左上角的 y 坐標
width	<number>	矩形路徑的寬度
height	<number>	矩形路徑的高度

繪制文本

CanvasRenderingContext2D.fillText()

填充文本

語法

ctx.fillText(text, x, y)

參數(shù)

參數(shù)	類型	描述
text	<string>	在畫布上輸出的文本
x	<number>	繪制文本的左上角 x 坐標位置
y	<number>	繪制文本的左上角 y 坐標位置

CanvasRenderingContext2D.strokeText()

給定的 (x, y) 位置繪制文本描邊的方法

語法

ctx.strokeText(text, x, y);

參數(shù)

參數(shù)	類型	描述
text	<string>	要繪制的文本
x	<number>	文本起始點的 x 軸坐標
y	<number>	文本起始點的 y 軸坐標

CanvasRenderingContext2D.measureText()

返回一個 TextMetrics 對象，該對象包含以像素計的指定字體寬度

語法

ctx.measureText(text);

參數(shù)

參數(shù)	類型	描述
text	<string>	要測量的文本

返回值

類型	描述
TextMetrics	返回一個 TextMetrics 對象，該對象包含以像素計的指定字體寬度。（TextMetrics.width 來獲取寬度）

線型

CanvasRenderingContext2D.lineWidth

設置線條的寬度

語法

ctx.lineWidth = lineWidth;

參數(shù)

參數(shù)	類型	描述
lineWidth	<number>	線條的寬度

CanvasRenderingContext2D.lineCap

設置線條的端點樣式

語法

ctx.lineCap = lineCap;

參數(shù)

參數(shù)	類型	描述
lineCap	<string>	'butt'(默認)、'round'、'square'

CanvasRenderingContext2D.lineJoin

設置線條的交點樣式

語法

ctx.lineJoin = lineJoin;

參數(shù)

參數(shù)	類型	描述
lineJoin	<string>	'bevel'、'round'、'miter'(默認)

CanvasRenderingContext2D.miterLimit

設置最大斜接長度，斜接長度指的是在兩條線交匯處內角和外角之間的距離

語法

ctx.miterLimit = miterLimit;

參數(shù)

參數(shù)	類型	描述
miterLimit	<number>	默認值是 10

文本樣式

CanvasRenderingContext2D.font

設置當前字體樣式的屬性

語法

ctx.font = value;

參數(shù)

參數(shù)	類型	描述
value	<string>	符合 CSS font 語法的 DOMString 字符串。默認值為 10px sans-serif

CanvasRenderingContext2D.textAlign

設置文字的對齊方式

語法

ctx.textAlign = align;

參數(shù)

參數(shù)	類型	描述
align	<string>	'start'(默認),'end','left','center','right'

CanvasRenderingContext2D.textBaseline

設置文字的水平對齊

語法

ctx.textBaseline = textBaseline;

參數(shù)

參數(shù)	類型	描述
textBaseline	<string>	'alphabetic'(默認),'middle','top','hanging','bottom','ideographic'

填充和描邊樣式

CanvasRenderingContext2D.fillStyle

設置填充色

語法

ctx.fillStyle = color;
ctx.fillStyle = gradient;
ctx.fillStyle = pattern;

參數(shù)

參數(shù)	類型	描述
color	<string>	CSS color
gradient	CanvasGradient	可通過 CanvasRenderingContext2D.createLinearGradient() 方法創(chuàng)建
pattern	CanvasPattern	通過 CanvasRenderingContext2D.createPattern() 方法創(chuàng)建

CanvasRenderingContext2D.strokeStyle

設置邊框顏色

語法

ctx.strokeStyle = color;
ctx.strokeStyle = gradient;
ctx.strokeStyle = pattern;

參數(shù)

參數(shù)	類型	描述
color	<string>	CSS color
gradient	CanvasGradient	可通過 CanvasRenderingContext2D.createLinearGradient() 方法創(chuàng)建
pattern	CanvasPattern	通過 CanvasRenderingContext2D.createPattern() 方法創(chuàng)建

漸變和圖案

CanvasRenderingContext2D.createLinearGradient()

創(chuàng)建一個線性的漸變顏色

語法

ctx.createLinearGradient(x0, y0, x1, y1);

參數(shù)

參數(shù)	類型	描述
x0	<number>	起點的 x 坐標
y0	<number>	起點的 y 坐標
x1	<number>	終點的 x 坐標
y1	<number>	終點的 y 坐標

CanvasRenderingContext2D.createPattern()

對指定的圖像創(chuàng)建模式的方法，可在指定的方向上重復元圖像

語法

ctx.createPattern(image, repetition);

參數(shù)

參數(shù)	類型	描述
image	Image	重復的圖像源
repetition	<string>	指定如何重復圖像, 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'

路徑

CanvasRenderingContext2D.beginPath()

開始創(chuàng)建一個新路徑

語法

ctx.beginPath();

CanvasRenderingContext2D.closePath()

封閉一個路徑

語法

ctx.closePath();

CanvasRenderingContext2D.moveTo()

把路徑移動到畫布中的指定點

語法

ctx.moveTo(x, y);

參數(shù)

參數(shù)	類型	描述
x	<number>	目標位置的 x 坐標
y	<number>	目標位置的 y 坐標

CanvasRenderingContext2D.lineTo()

使用直線連接子路徑的終點到 x，y 坐標

語法

ctx.lineTo(x, y);

參數(shù)

參數(shù)	類型	描述
x	<number>	目標位置的 x 坐標
y	<number>	目標位置的 y 坐標

CanvasRenderingContext2D.bezierCurveTo()

繪制三次貝賽爾曲線路徑

語法

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

參數(shù)

參數(shù)	類型	描述
cp1x	<number>	第一個貝塞爾控制點的 x 坐標
cp1y	<number>	第一個貝塞爾控制點的 y 坐標
cp2x	<number>	第二個貝塞爾控制點的 x 坐標
cp2y	<number>	第二個貝塞爾控制點的 y 坐標
x	<number>	結束點的 x 坐標
y	<number>	結束點的 y 坐標

CanvasRenderingContext2D.quadraticCurveTo()

創(chuàng)建二次貝塞爾曲線路徑

語法

ctx.quadraticCurveTo(cpx, cpy, x, y);

參數(shù)

參數(shù)	類型	描述
cpx	<number>	貝塞爾控制點的 x 坐標
cpy	<number>	貝塞爾控制點的 y 坐標
x	<number>	結束點的 x 坐標
y	<number>	結束點的 y 坐標

CanvasRenderingContext2D.arc()

畫一條弧線

語法

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

參數(shù)

參數(shù)	類型	描述
x	<number>	圓的 x 坐標
y	<number>	圓的 y 坐標
radius	<number>	圓的半徑
startAngle	<number>	起始弧度， x 軸方向開始計算，單位以弧度表示。
endAngle	<number>	終止弧度
anticlockwise	Boolean	可選。如果為 true，逆時針繪制圓，反之，順時針繪制

CanvasRenderingContext2D.arcTo()

根據(jù)控制點和半徑繪制圓弧路徑

語法

ctx.arcTo(x1, y1, x2, y2, radius);

參數(shù)

參數(shù)	類型	描述
x1	<number>	第一個控制點的 x 軸坐標
y1	<number>	第一個控制點的 y 軸坐標
x2	<number>	第二個控制點的 x 軸坐標
y2	<number>	第二個控制點的 y 軸坐標
radius	<number>	圓弧的半徑

CanvasRenderingContext2D.rect()

創(chuàng)建一個矩形

語法

ctx.rect(x, y, width, height);

參數(shù)

參數(shù)	類型	描述
x	<number>	矩形路徑左上角的 x 坐標
y	<number>	矩形路徑左上角的 y 坐標
width	<number>	矩形路徑的寬度
height	<number>	矩形路徑的高度

繪制路徑

CanvasRenderingContext2D.fill()

對當前路徑中的內容進行填充

語法

ctx.fill();

CanvasRenderingContext2D.stroke()

畫出當前路徑的邊框

語法

ctx.stroke();

CanvasRenderingContext2D.clip()

將當前創(chuàng)建的路徑設置為當前剪切路徑

語法

 ctx.clip();

變換

CanvasRenderingContext2D.rotate()

順時針旋轉當前坐標軸

語法

ctx.rotate(angle);

參數(shù)

參數(shù)	類型	描述
rotate	<number>	順時針旋轉的弧度。如果你想通過角度值計算，可以使用公式： degree * Math.PI / 180 。旋轉中心點一直是 canvas 的起始點。 如果想改變中心點，可以通過 translate() 方法移動 canvas.

CanvasRenderingContext2D.scale()

據(jù) x 水平方向和 y 垂直方向，為 canvas 單位添加縮放變換。

語法

ctx.scale(x, y);

參數(shù)

參數(shù)	類型	描述
x	<number>	水平方向的縮放因子
y	<number>	垂直方向的縮放因子

CanvasRenderingContext2D.setTransform()

使用矩陣重新設置（覆蓋）當前變換的方法

語法

ctx.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY);

參數(shù)

參數(shù)	類型	描述
scaleX	<number>	水平縮放
skewX	<number>	水平傾斜
skewY	<number>	垂直傾斜
scaleY	<number>	垂直縮放
translateX	<number>	水平移動
translateY	<number>	垂直移動

CanvasRenderingContext2D.transform()

使用矩陣多次疊加當前變換

語法

ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY);

參數(shù)

參數(shù)	類型	描述
scaleX	<number>	水平縮放
skewX	<number>	水平傾斜
skewY	<number>	垂直傾斜
scaleY	<number>	垂直縮放
translateX	<number>	水平移動
translateY	<number>	垂直移動

CanvasRenderingContext2D.translate()

對當前坐標系的原點(0, 0)進行變換

語法

ctx.translate(x, y);

參數(shù)

參數(shù)	類型	描述
x	<number>	水平坐標平移量
y	<number>	豎直坐標平移量

合成

CanvasRenderingContext2D.globalAlpha

設置全局畫筆透明度

語法

ctx.globalAlpha = value;

參數(shù)

參數(shù)	類型	描述
value	<number>	數(shù)字在 0.0 （完全透明）和 1.0 （完全不透明）之間。 默認值是 1.0

繪制圖像

CanvasRenderingContext2D.drawImage()

繪制圖像到畫布

語法

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

參數(shù)

參數(shù)	類型	描述
image	Image	所要繪制的圖片資源 對象
dx	<number>	圖像的左上角在目標 canvas 上 X 軸的位置
dy	<number>	圖像的左上角在目標 canvas 上 Y 軸的位置
dWidth	<number>	在目標畫布上繪制圖像的寬度，允許對繪制的圖像進行縮放
dHeigt	<number>	在目標畫布上繪制圖像的高度，允許對繪制的圖像進行縮放
sx	<number>	源圖像的矩形選擇框的左上角 X 坐標
sy	<number>	源圖像的矩形選擇框的左上角 Y 坐標
sWidth	<number>	源圖像的矩形選擇框的高度
sHeight	<number>	源圖像的矩形選擇框的高度

Canvas 狀態(tài)

CanvasRenderingContext2D.restore()

恢復之前保存的繪圖上下文

語法

ctx.restore();

CanvasRenderingContext2D.save()

保存當前的繪圖上下文

語法

ctx.save();

像素操作 1030+

CanvasRenderingContext2D.createImageData()

創(chuàng)建一個新的、空白的、指定大小的 ImageData 對象

語法

imagedata = ctx.createImageData(width, height);
imagedata = ctx.createImageData(imagedata);

參數(shù)

參數(shù)	類型	描述
width	<number>	ImageData 新對象的寬度
height	<number>	ImageData 新對象的高度
imagedata	<object>	從現(xiàn)有的 ImageData 對象中，復制一個和其寬度和高度相同的對象。圖像自身不允許被復制。

返回值

類型	描述
<object>	指定了寬度和高度的，新的 ImageData 對象。 新對象使用透明的像素進行填充。

CanvasRenderingContext2D.getImageData()

返回一個 ImageData 對象，用來描述 canvas 區(qū)域隱含的像素數(shù)據(jù)

語法

imagedata = ctx.getImageData(sx, sy, sw, sh);

參數(shù)

參數(shù)	類型	描述
sx	<number>	將要被提取的圖像數(shù)據(jù)矩形區(qū)域的左上角 X 坐標
sy	<number>	將要被提取的圖像數(shù)據(jù)矩形區(qū)域的左上角 Y 坐標
sw	<number>	將要被提取的圖像數(shù)據(jù)矩形區(qū)域的寬度
sh	<number>	將要被提取的圖像數(shù)據(jù)矩形區(qū)域的高度

返回值

類型	描述
<object>	一個 ImageData 對象，包含 canvas 給定的矩形圖像數(shù)據(jù)

CanvasRenderingContext2D.putImageData()

使用圖像像素對象繪制矩形

語法

ctx.putImageData(imagedata, dx, dy);
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

參數(shù)

參數(shù)	類型	描述
imagedata	<object>	一個 ImageData 對象，包含像素值的數(shù)組對象
dx	<number>	源圖像數(shù)據(jù)在目標畫布中的位置偏移量 X 軸方向的偏移量
dy	<number>	源圖像數(shù)據(jù)在目標畫布中的位置偏移量 Y 軸方向的偏移量
dirtyX	<number>	在源圖像數(shù)據(jù)中，矩形區(qū)域左上角的位置。默認是整個圖像數(shù)據(jù)的左上角 X 坐標
dirtyY	<number>	在源圖像數(shù)據(jù)中，矩形區(qū)域左上角的位置。默認是整個圖像數(shù)據(jù)的左上角 Y 坐標
dirtyWidth	<number>	在源圖像數(shù)據(jù)中，矩形區(qū)域的寬度。默認是圖像數(shù)據(jù)的寬度
dirtyHeight	<number>	在源圖像數(shù)據(jù)中，矩形區(qū)域的高度。默認是圖像數(shù)據(jù)的高度

CanvasRenderingContext2D.setLineDash() 

設置虛線樣式的方法

語法

ctx.setLineDash(segments);

參數(shù)

參數(shù)	類型	描述
segments	<Array>	描述交替繪制線段和間距長度的數(shù)字

CanvasRenderingContext2D.getLineDash()

獲取當前線段樣式的方法

語法

ctx.getLineDash();

返回值

類型	描述
<Array>	返回一個 Array 數(shù)組，一組描述交替繪制線段和間距長度的數(shù)字

CanvasRenderingContext2D.lineDashOffset 

設置虛線偏移量的屬性

語法

ctx.lineDashOffset = value;

返回值

類型	描述
<number>	偏移量是 float 精度的數(shù)字。 初始值為 0.0

CanvasRenderingContext2D.globalCompositeOperation 

設置要在繪制新形狀時應用的合成操作的類型。

語法

ctx.globalCompositeOperation = type;

參數(shù)

參數(shù)	類型	描述
type	<string>	標識要使用的合成或混合模式操作的字符串

屬性值

值	描述
source-over	默認。在目標圖像上顯示源圖像。
source-atop	在目標圖像頂部顯示源圖像。源圖像位于目標圖像之外的部分是不可見的。
source-in	在目標圖像中顯示源圖像。只有目標圖像內的源圖像部分會顯示，目標圖像是透明的。
source-out	在目標圖像之外顯示源圖像。只會顯示目標圖像之外源圖像部分，目標圖像是透明的。
destination-over	在源圖像上方顯示目標圖像。
destination-atop	在源圖像頂部顯示目標圖像。源圖像之外的目標圖像部分不會被顯示。
destination-in	在源圖像中顯示目標圖像。只有源圖像內的目標圖像部分會被顯示，源圖像是透明的。
destination-out	在源圖像外顯示目標圖像。只有源圖像外的目標圖像部分會被顯示，源圖像是透明的。
lighter	顯示源圖像 + 目標圖像。
copy	顯示源圖像。忽略目標圖像。
xor	使用異或操作對源圖像與目標圖像進行組合。

CanvasRenderingContext2D.shadowBlur

陰影的模糊級別，數(shù)值越大越模糊，默認值為0

語法

ctx.shadowBlur = blur;

參數(shù)

參數(shù)	類型	描述
blur	<number>	描述模糊效果程度的，float 類型的值。默認值是 0。

CanvasRenderingContext2D.shadowColor

可以轉換成 CSS值的DOMString 字符串。 默認值是 fully-transparent black.

語法

ctx.shadowColor = color;

參數(shù)

參數(shù)	類型	描述
color	<string>	CSS color，模糊的顏色

CanvasRenderingContext2D.shadowOffsetX

陰影水平偏移距離的float類型的值。默認值是 0。

語法

ctx.shadowOffsetX = offsetX;

參數(shù)

參數(shù)	類型	描述
offsetX	<number>	陰影在水平方向的偏移

CanvasRenderingContext2D.shadowOffsetY

陰影垂直偏移距離的float類型的值。 默認值是 0。

語法

ctx.shadowOffsetY = offsetY;

參數(shù)

參數(shù)	類型	描述
offsetY	<number>	陰影在豎直方向的偏移

Image

概述

圖片對象，通過 new Image() 創(chuàng)建

屬性

名稱	類型	默認值	必填	描述
src	<string>	""	是	網(wǎng)絡地址或本地資源。支持 internal URI 1030+
width	<number>	0px	否	圖片高度
height	<number>	0px	否	圖片寬度

事件

名稱	參數(shù)	描述
onload	{ type: 'load', target: image }	src 圖片加載成功后調用
onerror	{ type: 'error', target: image }	src 圖片加載失敗后調用

CanvasGradient

概述

漸變對象，通過 CanvasRenderingContext2D.createLinearGradient() 創(chuàng)建

語法

const gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"white");

方法

CanvasGradient.addColorStop()

該方法在 CanvasGradient 對象上添加一個由偏移值和顏色值指定的斷點

語法

gradient.addColorStop(offset, color);

參數(shù)

參數(shù)	類型	描述
offset	<number>	0到1之間的值, 表示漸變點在起點和終點中的位置
color	<string>	CSS Color

ImageData 

概述

ImageData 對象是一個普通對象，其中存儲著 canvas 對象真實的像素數(shù)據(jù)

屬性

名稱	類型	描述
width	<number>	使用像素描述 ImageData 的實際寬度
height	<number>	使用像素描述 ImageData 的實際高度
data	<Uint8ClampedArray>	一個一維數(shù)組，包含以 RGBA 順序的數(shù)據(jù)，數(shù)據(jù)使用 0 至 255（包含）的整數(shù)表示

canvas   示例代碼

查看 示例代碼