快應(yīng)用 canvas組件

概述

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

子組件

不支持

屬性

支持 通用屬性

樣式

支持 通用樣式

事件

支持 通用事件

方法

canvas.toTempFilePath(Object object)

把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片。

參數(shù)

Object object

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

object.fileType 的合法值

值	描述
jpg	jpg 圖片
png	png 圖片

object.success 回調(diào)函數(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 上調(diào)用 getContext('2d') 來獲取 CanvasRenderingContext2D 的對象。

方法和屬性

繪制矩形

CanvasRenderingContext2D.clearRect()

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

語法

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

參數(shù)

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

CanvasRenderingContext2D.fillRect()

填充一個矩形

語法

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

參數(shù)

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

CanvasRenderingContext2D.strokeRect()

畫一個非填充矩形

語法

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

參數(shù)

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

繪制文本

CanvasRenderingContext2D.fillText()

填充文本

語法

ctx.fillText(text, x, y)

參數(shù)

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

CanvasRenderingContext2D.strokeText()

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

語法

ctx.strokeText(text, x, y);

參數(shù)

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

CanvasRenderingContext2D.measureText()

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

語法

ctx.measureText(text);

參數(shù)

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

返回值

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

線型

CanvasRenderingContext2D.lineWidth

設(shè)置線條的寬度

語法

ctx.lineWidth = lineWidth;

參數(shù)

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

CanvasRenderingContext2D.lineCap

設(shè)置線條的端點(diǎn)樣式

語法

ctx.lineCap = lineCap;

參數(shù)

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

CanvasRenderingContext2D.lineJoin

設(shè)置線條的交點(diǎn)樣式

語法

ctx.lineJoin = lineJoin;

參數(shù)

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

CanvasRenderingContext2D.miterLimit

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

語法

ctx.miterLimit = miterLimit;

參數(shù)

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

文本樣式

CanvasRenderingContext2D.font

設(shè)置當(dāng)前字體樣式的屬性

語法

ctx.font = value;

參數(shù)

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

CanvasRenderingContext2D.textAlign

設(shè)置文字的對齊方式

語法

ctx.textAlign = align;

參數(shù)

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

CanvasRenderingContext2D.textBaseline

設(shè)置文字的水平對齊

語法

ctx.textBaseline = textBaseline;

參數(shù)

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

填充和描邊樣式

CanvasRenderingContext2D.fillStyle

設(shè)置填充色

語法

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

設(shè)置邊框顏色

語法

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>	起點(diǎn)的 x 坐標(biāo)
y0	<number>	起點(diǎn)的 y 坐標(biāo)
x1	<number>	終點(diǎn)的 x 坐標(biāo)
y1	<number>	終點(diǎn)的 y 坐標(biāo)

CanvasRenderingContext2D.createPattern()

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

語法

ctx.createPattern(image, repetition);

參數(shù)

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

路徑

CanvasRenderingContext2D.beginPath()

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

語法

ctx.beginPath();

CanvasRenderingContext2D.closePath()

封閉一個路徑

語法

ctx.closePath();

CanvasRenderingContext2D.moveTo()

把路徑移動到畫布中的指定點(diǎn)

語法

ctx.moveTo(x, y);

參數(shù)

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

CanvasRenderingContext2D.lineTo()

使用直線連接子路徑的終點(diǎn)到 x，y 坐標(biāo)

語法

ctx.lineTo(x, y);

參數(shù)

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

CanvasRenderingContext2D.bezierCurveTo()

繪制三次貝賽爾曲線路徑

語法

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

參數(shù)

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

CanvasRenderingContext2D.quadraticCurveTo()

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

語法

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

參數(shù)

參數(shù)	類型	描述
cpx	<number>	貝塞爾控制點(diǎn)的 x 坐標(biāo)
cpy	<number>	貝塞爾控制點(diǎn)的 y 坐標(biāo)
x	<number>	結(jié)束點(diǎn)的 x 坐標(biāo)
y	<number>	結(jié)束點(diǎn)的 y 坐標(biāo)

CanvasRenderingContext2D.arc()

畫一條弧線

語法

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

參數(shù)

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

CanvasRenderingContext2D.arcTo()

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

語法

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

參數(shù)

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

CanvasRenderingContext2D.rect()

創(chuàng)建一個矩形

語法

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

參數(shù)

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

繪制路徑

CanvasRenderingContext2D.fill()

對當(dāng)前路徑中的內(nèi)容進(jìn)行填充

語法

ctx.fill();

CanvasRenderingContext2D.stroke()

畫出當(dāng)前路徑的邊框

語法

ctx.stroke();

CanvasRenderingContext2D.clip()

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

語法

 ctx.clip();

變換

CanvasRenderingContext2D.rotate()

順時針旋轉(zhuǎn)當(dāng)前坐標(biāo)軸

語法

ctx.rotate(angle);

參數(shù)

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

CanvasRenderingContext2D.scale()

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

語法

ctx.scale(x, y);

參數(shù)

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

CanvasRenderingContext2D.setTransform()

使用矩陣重新設(shè)置（覆蓋）當(dāng)前變換的方法

語法

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

參數(shù)

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

CanvasRenderingContext2D.transform()

使用矩陣多次疊加當(dāng)前變換

語法

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

參數(shù)

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

CanvasRenderingContext2D.translate()

對當(dāng)前坐標(biāo)系的原點(diǎn)(0, 0)進(jìn)行變換

語法

ctx.translate(x, y);

參數(shù)

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

合成

CanvasRenderingContext2D.globalAlpha

設(shè)置全局畫筆透明度

語法

ctx.globalAlpha = value;

參數(shù)

參數(shù)	類型	描述
value	<number>	數(shù)字在 0.0 （完全透明）和 1.0 （完全不透明）之間。 默認(rèn)值是 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>	圖像的左上角在目標(biāo) canvas 上 X 軸的位置
dy	<number>	圖像的左上角在目標(biāo) canvas 上 Y 軸的位置
dWidth	<number>	在目標(biāo)畫布上繪制圖像的寬度，允許對繪制的圖像進(jìn)行縮放
dHeigt	<number>	在目標(biāo)畫布上繪制圖像的高度，允許對繪制的圖像進(jìn)行縮放
sx	<number>	源圖像的矩形選擇框的左上角 X 坐標(biāo)
sy	<number>	源圖像的矩形選擇框的左上角 Y 坐標(biāo)
sWidth	<number>	源圖像的矩形選擇框的高度
sHeight	<number>	源圖像的矩形選擇框的高度

Canvas 狀態(tài)

CanvasRenderingContext2D.restore()

恢復(fù)之前保存的繪圖上下文

語法

ctx.restore();

CanvasRenderingContext2D.save()

保存當(dāng)前的繪圖上下文

語法

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 對象中，復(fù)制一個和其寬度和高度相同的對象。圖像自身不允許被復(fù)制。

返回值

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

CanvasRenderingContext2D.getImageData()

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

語法

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

參數(shù)

參數(shù)	類型	描述
sx	<number>	將要被提取的圖像數(shù)據(jù)矩形區(qū)域的左上角 X 坐標(biāo)
sy	<number>	將要被提取的圖像數(shù)據(jù)矩形區(qū)域的左上角 Y 坐標(biāo)
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ù)在目標(biāo)畫布中的位置偏移量 X 軸方向的偏移量
dy	<number>	源圖像數(shù)據(jù)在目標(biāo)畫布中的位置偏移量 Y 軸方向的偏移量
dirtyX	<number>	在源圖像數(shù)據(jù)中，矩形區(qū)域左上角的位置。默認(rèn)是整個圖像數(shù)據(jù)的左上角 X 坐標(biāo)
dirtyY	<number>	在源圖像數(shù)據(jù)中，矩形區(qū)域左上角的位置。默認(rèn)是整個圖像數(shù)據(jù)的左上角 Y 坐標(biāo)
dirtyWidth	<number>	在源圖像數(shù)據(jù)中，矩形區(qū)域的寬度。默認(rèn)是圖像數(shù)據(jù)的寬度
dirtyHeight	<number>	在源圖像數(shù)據(jù)中，矩形區(qū)域的高度。默認(rèn)是圖像數(shù)據(jù)的高度

CanvasRenderingContext2D.setLineDash() 

設(shè)置虛線樣式的方法

語法

ctx.setLineDash(segments);

參數(shù)

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

CanvasRenderingContext2D.getLineDash()

獲取當(dāng)前線段樣式的方法

語法

ctx.getLineDash();

返回值

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

CanvasRenderingContext2D.lineDashOffset 

設(shè)置虛線偏移量的屬性

語法

ctx.lineDashOffset = value;

返回值

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

CanvasRenderingContext2D.globalCompositeOperation 

設(shè)置要在繪制新形狀時應(yīng)用的合成操作的類型。

語法

ctx.globalCompositeOperation = type;

參數(shù)

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

屬性值

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

CanvasRenderingContext2D.shadowBlur

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

語法

ctx.shadowBlur = blur;

參數(shù)

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

CanvasRenderingContext2D.shadowColor

可以轉(zhuǎn)換成 CSS值的DOMString 字符串。 默認(rèn)值是 fully-transparent black.

語法

ctx.shadowColor = color;

參數(shù)

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

CanvasRenderingContext2D.shadowOffsetX

陰影水平偏移距離的float類型的值。默認(rèn)值是 0。

語法

ctx.shadowOffsetX = offsetX;

參數(shù)

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

CanvasRenderingContext2D.shadowOffsetY

陰影垂直偏移距離的float類型的值。 默認(rèn)值是 0。

語法

ctx.shadowOffsetY = offsetY;

參數(shù)

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

Image

概述

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

屬性

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

事件

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

CanvasGradient

概述

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

語法

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

方法

CanvasGradient.addColorStop()

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

語法

gradient.addColorStop(offset, color);

參數(shù)

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

ImageData 

概述

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

屬性

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

canvas   示例代碼

查看 示例代碼