快应用 canvas组件

概述

画布组件，通过使用 JavaScript 中的脚本，可以在 canvas 上绘制图形，制作照片，创建动画等。

子组件

不支持

属性

支持 通用属性

样式

支持 通用样式

事件

支持 通用事件

方法

canvas.toTempFilePath(Object object)

把当前画布指定区域的内容导出生成指定大小的图片。

参数

Object object

属性	类型	默认值	必填	描述
x	number	0	否	指定的画布区域的左上角横坐标
y	number	0	否	指定的画布区域的左上角纵坐标
width	number	canvas 宽度-x	否	指定的画布区域的宽度
height	number	canvas 高度-y	否	指定的画布区域的高度
destWidth	number	width*屏幕像素密度	否	输出的图片的宽度
destHeight	number	height*屏幕像素密度	否	输出的图片的高度
fileType	string	png	否	目标文件的类型
quality	number	1.0	否	图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.fileType 的合法值

值	描述
jpg	jpg 图片
png	png 图片

object.success 回调函数

参数

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()

创建 canvas 绘图上下文

参数

参数	类型	描述
contextType	<string>	目前支持传入'2d'

返回值

参数	类型	描述
'2d'	CanvasRenderingContext2D	返回一个 CanvasRenderingContext2D 对象，用于 2D 绘制

示例

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

CanvasRenderingContext2D

概述

通过 CanvasRenderingContext2D 可以在 canvas 上绘制矩形、文本、图片和其他对象。可以在 canvas 上调用 getContext('2d') 来获取 CanvasRenderingContext2D 的对象。

方法和属性

绘制矩形

CanvasRenderingContext2D.clearRect()

清除画布上在该矩形区域内的内容

语法

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

参数

参数	类型	描述
x	<number>	矩形区域左上角的 x 坐标
y	<number>	矩形区域左上角的 y 坐标
width	<number>	矩形区域的宽度
height	<number>	矩形区域的高度

CanvasRenderingContext2D.fillRect()

填充一个矩形

语法

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

参数

参数	类型	描述
x	<number>	矩形路径左上角的 x 坐标
y	<number>	矩形路径左上角的 y 坐标
width	<number>	矩形路径的宽度
height	<number>	矩形路径的高度

CanvasRenderingContext2D.strokeRect()

画一个非填充矩形

语法

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

参数

参数	类型	描述
x	<number>	矩形路径左上角的 x 坐标
y	<number>	矩形路径左上角的 y 坐标
width	<number>	矩形路径的宽度
height	<number>	矩形路径的高度

绘制文本

CanvasRenderingContext2D.fillText()

填充文本

语法

ctx.fillText(text, x, y)

参数

参数	类型	描述
text	<string>	在画布上输出的文本
x	<number>	绘制文本的左上角 x 坐标位置
y	<number>	绘制文本的左上角 y 坐标位置

CanvasRenderingContext2D.strokeText()

给定的 (x, y) 位置绘制文本描边的方法

语法

ctx.strokeText(text, x, y);

参数

参数	类型	描述
text	<string>	要绘制的文本
x	<number>	文本起始点的 x 轴坐标
y	<number>	文本起始点的 y 轴坐标

CanvasRenderingContext2D.measureText()

返回一个 TextMetrics 对象，该对象包含以像素计的指定字体宽度

语法

ctx.measureText(text);

参数

参数	类型	描述
text	<string>	要测量的文本

返回值

类型	描述
TextMetrics	返回一个 TextMetrics 对象，该对象包含以像素计的指定字体宽度。（TextMetrics.width 来获取宽度）

线型

CanvasRenderingContext2D.lineWidth

设置线条的宽度

语法

ctx.lineWidth = lineWidth;

参数

参数	类型	描述
lineWidth	<number>	线条的宽度

CanvasRenderingContext2D.lineCap

设置线条的端点样式

语法

ctx.lineCap = lineCap;

参数

参数	类型	描述
lineCap	<string>	'butt'(默认)、'round'、'square'

CanvasRenderingContext2D.lineJoin

设置线条的交点样式

语法

ctx.lineJoin = lineJoin;

参数

参数	类型	描述
lineJoin	<string>	'bevel'、'round'、'miter'(默认)

CanvasRenderingContext2D.miterLimit

设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离

语法

ctx.miterLimit = miterLimit;

参数

参数	类型	描述
miterLimit	<number>	默认值是 10

文本样式

CanvasRenderingContext2D.font

设置当前字体样式的属性

语法

ctx.font = value;

参数

参数	类型	描述
value	<string>	符合 CSS font 语法的 DOMString 字符串。默认值为 10px sans-serif

CanvasRenderingContext2D.textAlign

设置文字的对齐方式

语法

ctx.textAlign = align;

参数

参数	类型	描述
align	<string>	'start'(默认),'end','left','center','right'

CanvasRenderingContext2D.textBaseline

设置文字的水平对齐

语法

ctx.textBaseline = textBaseline;

参数

参数	类型	描述
textBaseline	<string>	'alphabetic'(默认),'middle','top','hanging','bottom','ideographic'

填充和描边样式

CanvasRenderingContext2D.fillStyle

设置填充色

语法

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

参数

参数	类型	描述
color	<string>	CSS color
gradient	CanvasGradient	可通过 CanvasRenderingContext2D.createLinearGradient() 方法创建
pattern	CanvasPattern	通过 CanvasRenderingContext2D.createPattern() 方法创建

CanvasRenderingContext2D.strokeStyle

设置边框颜色

语法

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

参数

参数	类型	描述
color	<string>	CSS color
gradient	CanvasGradient	可通过 CanvasRenderingContext2D.createLinearGradient() 方法创建
pattern	CanvasPattern	通过 CanvasRenderingContext2D.createPattern() 方法创建

渐变和图案

CanvasRenderingContext2D.createLinearGradient()

创建一个线性的渐变颜色

语法

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

参数

参数	类型	描述
x0	<number>	起点的 x 坐标
y0	<number>	起点的 y 坐标
x1	<number>	终点的 x 坐标
y1	<number>	终点的 y 坐标

CanvasRenderingContext2D.createPattern()

对指定的图像创建模式的方法，可在指定的方向上重复元图像

语法

ctx.createPattern(image, repetition);

参数

参数	类型	描述
image	Image	重复的图像源
repetition	<string>	指定如何重复图像, 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'

路径

CanvasRenderingContext2D.beginPath()

开始创建一个新路径

语法

ctx.beginPath();

CanvasRenderingContext2D.closePath()

封闭一个路径

语法

ctx.closePath();

CanvasRenderingContext2D.moveTo()

把路径移动到画布中的指定点

语法

ctx.moveTo(x, y);

参数

参数	类型	描述
x	<number>	目标位置的 x 坐标
y	<number>	目标位置的 y 坐标

CanvasRenderingContext2D.lineTo()

使用直线连接子路径的终点到 x，y 坐标

语法

ctx.lineTo(x, y);

参数

参数	类型	描述
x	<number>	目标位置的 x 坐标
y	<number>	目标位置的 y 坐标

CanvasRenderingContext2D.bezierCurveTo()

绘制三次贝赛尔曲线路径

语法

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

参数

参数	类型	描述
cp1x	<number>	第一个贝塞尔控制点的 x 坐标
cp1y	<number>	第一个贝塞尔控制点的 y 坐标
cp2x	<number>	第二个贝塞尔控制点的 x 坐标
cp2y	<number>	第二个贝塞尔控制点的 y 坐标
x	<number>	结束点的 x 坐标
y	<number>	结束点的 y 坐标

CanvasRenderingContext2D.quadraticCurveTo()

创建二次贝塞尔曲线路径

语法

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

参数

参数	类型	描述
cpx	<number>	贝塞尔控制点的 x 坐标
cpy	<number>	贝塞尔控制点的 y 坐标
x	<number>	结束点的 x 坐标
y	<number>	结束点的 y 坐标

CanvasRenderingContext2D.arc()

画一条弧线

语法

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

参数

参数	类型	描述
x	<number>	圆的 x 坐标
y	<number>	圆的 y 坐标
radius	<number>	圆的半径
startAngle	<number>	起始弧度， x 轴方向开始计算，单位以弧度表示。
endAngle	<number>	终止弧度
anticlockwise	Boolean	可选。如果为 true，逆时针绘制圆，反之，顺时针绘制

CanvasRenderingContext2D.arcTo()

根据控制点和半径绘制圆弧路径

语法

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

参数

参数	类型	描述
x1	<number>	第一个控制点的 x 轴坐标
y1	<number>	第一个控制点的 y 轴坐标
x2	<number>	第二个控制点的 x 轴坐标
y2	<number>	第二个控制点的 y 轴坐标
radius	<number>	圆弧的半径

CanvasRenderingContext2D.rect()

创建一个矩形

语法

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

参数

参数	类型	描述
x	<number>	矩形路径左上角的 x 坐标
y	<number>	矩形路径左上角的 y 坐标
width	<number>	矩形路径的宽度
height	<number>	矩形路径的高度

绘制路径

CanvasRenderingContext2D.fill()

对当前路径中的内容进行填充

语法

ctx.fill();

CanvasRenderingContext2D.stroke()

画出当前路径的边框

语法

ctx.stroke();

CanvasRenderingContext2D.clip()

将当前创建的路径设置为当前剪切路径

语法

 ctx.clip();

变换

CanvasRenderingContext2D.rotate()

顺时针旋转当前坐标轴

语法

ctx.rotate(angle);

参数

参数	类型	描述
rotate	<number>	顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。旋转中心点一直是 canvas 的起始点。 如果想改变中心点，可以通过 translate() 方法移动 canvas.

CanvasRenderingContext2D.scale()

据 x 水平方向和 y 垂直方向，为 canvas 单位添加缩放变换。

语法

ctx.scale(x, y);

参数

参数	类型	描述
x	<number>	水平方向的缩放因子
y	<number>	垂直方向的缩放因子

CanvasRenderingContext2D.setTransform()

使用矩阵重新设置（覆盖）当前变换的方法

语法

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

参数

参数	类型	描述
scaleX	<number>	水平缩放
skewX	<number>	水平倾斜
skewY	<number>	垂直倾斜
scaleY	<number>	垂直缩放
translateX	<number>	水平移动
translateY	<number>	垂直移动

CanvasRenderingContext2D.transform()

使用矩阵多次叠加当前变换

语法

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

参数

参数	类型	描述
scaleX	<number>	水平缩放
skewX	<number>	水平倾斜
skewY	<number>	垂直倾斜
scaleY	<number>	垂直缩放
translateX	<number>	水平移动
translateY	<number>	垂直移动

CanvasRenderingContext2D.translate()

对当前坐标系的原点(0, 0)进行变换

语法

ctx.translate(x, y);

参数

参数	类型	描述
x	<number>	水平坐标平移量
y	<number>	竖直坐标平移量

合成

CanvasRenderingContext2D.globalAlpha

设置全局画笔透明度

语法

ctx.globalAlpha = value;

参数

参数	类型	描述
value	<number>	数字在 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)

参数

参数	类型	描述
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 状态

CanvasRenderingContext2D.restore()

恢复之前保存的绘图上下文

语法

ctx.restore();

CanvasRenderingContext2D.save()

保存当前的绘图上下文

语法

ctx.save();

像素操作 1030+

CanvasRenderingContext2D.createImageData()

创建一个新的、空白的、指定大小的 ImageData 对象

语法

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

参数

参数	类型	描述
width	<number>	ImageData 新对象的宽度
height	<number>	ImageData 新对象的高度
imagedata	<object>	从现有的 ImageData 对象中，复制一个和其宽度和高度相同的对象。图像自身不允许被复制。

返回值

类型	描述
<object>	指定了宽度和高度的，新的 ImageData 对象。 新对象使用透明的像素进行填充。

CanvasRenderingContext2D.getImageData()

返回一个 ImageData 对象，用来描述 canvas 区域隐含的像素数据

语法

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

参数

参数	类型	描述
sx	<number>	将要被提取的图像数据矩形区域的左上角 X 坐标
sy	<number>	将要被提取的图像数据矩形区域的左上角 Y 坐标
sw	<number>	将要被提取的图像数据矩形区域的宽度
sh	<number>	将要被提取的图像数据矩形区域的高度

返回值

类型	描述
<object>	一个 ImageData 对象，包含 canvas 给定的矩形图像数据

CanvasRenderingContext2D.putImageData()

使用图像像素对象绘制矩形

语法

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

参数

参数	类型	描述
imagedata	<object>	一个 ImageData 对象，包含像素值的数组对象
dx	<number>	源图像数据在目标画布中的位置偏移量 X 轴方向的偏移量
dy	<number>	源图像数据在目标画布中的位置偏移量 Y 轴方向的偏移量
dirtyX	<number>	在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角 X 坐标
dirtyY	<number>	在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角 Y 坐标
dirtyWidth	<number>	在源图像数据中，矩形区域的宽度。默认是图像数据的宽度
dirtyHeight	<number>	在源图像数据中，矩形区域的高度。默认是图像数据的高度

CanvasRenderingContext2D.setLineDash() 

设置虚线样式的方法

语法

ctx.setLineDash(segments);

参数

参数	类型	描述
segments	<Array>	描述交替绘制线段和间距长度的数字

CanvasRenderingContext2D.getLineDash()

获取当前线段样式的方法

语法

ctx.getLineDash();

返回值

类型	描述
<Array>	返回一个 Array 数组，一组描述交替绘制线段和间距长度的数字

CanvasRenderingContext2D.lineDashOffset 

设置虚线偏移量的属性

语法

ctx.lineDashOffset = value;

返回值

类型	描述
<number>	偏移量是 float 精度的数字。 初始值为 0.0

CanvasRenderingContext2D.globalCompositeOperation 

设置要在绘制新形状时应用的合成操作的类型。

语法

ctx.globalCompositeOperation = type;

参数

参数	类型	描述
type	<string>	标识要使用的合成或混合模式操作的字符串

属性值

值	描述
source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over	在源图像上方显示目标图像。
destination-atop	在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in	在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
xor	使用异或操作对源图像与目标图像进行组合。

CanvasRenderingContext2D.shadowBlur

阴影的模糊级别，数值越大越模糊，默认值为0

语法

ctx.shadowBlur = blur;

参数

参数	类型	描述
blur	<number>	描述模糊效果程度的，float 类型的值。默认值是 0。

CanvasRenderingContext2D.shadowColor

可以转换成 CSS值的DOMString 字符串。 默认值是 fully-transparent black.

语法

ctx.shadowColor = color;

参数

参数	类型	描述
color	<string>	CSS color，模糊的颜色

CanvasRenderingContext2D.shadowOffsetX

阴影水平偏移距离的float类型的值。默认值是 0。

语法

ctx.shadowOffsetX = offsetX;

参数

参数	类型	描述
offsetX	<number>	阴影在水平方向的偏移

CanvasRenderingContext2D.shadowOffsetY

阴影垂直偏移距离的float类型的值。 默认值是 0。

语法

ctx.shadowOffsetY = offsetY;

参数

参数	类型	描述
offsetY	<number>	阴影在竖直方向的偏移

Image

概述

图片对象，通过 new Image() 创建

属性

名称	类型	默认值	必填	描述
src	<string>	""	是	网络地址或本地资源。支持 internal URI 1030+
width	<number>	0px	否	图片高度
height	<number>	0px	否	图片宽度

事件

名称	参数	描述
onload	{ type: 'load', target: image }	src 图片加载成功后调用
onerror	{ type: 'error', target: image }	src 图片加载失败后调用

CanvasGradient

概述

渐变对象，通过 CanvasRenderingContext2D.createLinearGradient() 创建

语法

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

方法

CanvasGradient.addColorStop()

该方法在 CanvasGradient 对象上添加一个由偏移值和颜色值指定的断点

语法

gradient.addColorStop(offset, color);

参数

参数	类型	描述
offset	<number>	0到1之间的值, 表示渐变点在起点和终点中的位置
color	<string>	CSS Color

ImageData 

概述

ImageData 对象是一个普通对象，其中存储着 canvas 对象真实的像素数据

属性

名称	类型	描述
width	<number>	使用像素描述 ImageData 的实际宽度
height	<number>	使用像素描述 ImageData 的实际高度
data	<Uint8ClampedArray>	一个一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示

canvas   示例代码

查看 示例代码