canvas 1020+

概述

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

子组件

不支持

属性

支持通用属性

样式

支持通用样式

事件

支持通用事件

方法

canvas.toTempFilePath(Object object) 1050+

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

参数

Object object

object.fileType 的合法值

object.success 回调函数

参数

Object res

示例代码

// ...
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.uri
    },
    fail: (err, code) => {
      prompt.showToast({
        message: `错误原因：${err}, 错误代码：${code}`
      })
    }
  })
}
// ...

canvas.getContext()

创建 canvas 绘图上下文

参数

返回值

示例

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

CanvasRenderingContext2D 1020+

概述

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

方法和属性

绘制矩形

CanvasRenderingContext2D.clearRect()

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

语法

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

参数

CanvasRenderingContext2D.fillRect()

填充一个矩形

语法

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

参数

CanvasRenderingContext2D.strokeRect()

画一个非填充矩形

语法

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

参数

绘制文本

CanvasRenderingContext2D.fillText()

填充文本

语法

ctx.fillText(text, x, y)

参数

CanvasRenderingContext2D.strokeText()

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

语法

ctx.strokeText(text, x, y);

参数

CanvasRenderingContext2D.measureText()

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

语法

ctx.measureText(text);

参数

返回值

线型

CanvasRenderingContext2D.lineWidth

设置线条的宽度

语法

ctx.lineWidth = lineWidth;

参数

CanvasRenderingContext2D.lineCap

设置线条的端点样式

语法

ctx.lineCap = lineCap;

参数

CanvasRenderingContext2D.lineJoin

设置线条的交点样式

语法

ctx.lineJoin = lineJoin;

参数

CanvasRenderingContext2D.miterLimit

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

语法

ctx.miterLimit = miterLimit;

参数

文本样式

CanvasRenderingContext2D.font

设置当前字体样式的属性

语法

ctx.font = value;

参数

CanvasRenderingContext2D.textAlign

设置文字的对齐方式

语法

ctx.textAlign = align;

参数

CanvasRenderingContext2D.textBaseline

设置文字的水平对齐

语法

ctx.textBaseline = textBaseline;

参数

填充和描边样式

CanvasRenderingContext2D.fillStyle

设置填充色

语法

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

参数

CanvasRenderingContext2D.strokeStyle

设置边框颜色

语法

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

参数

渐变和图案

CanvasRenderingContext2D.createLinearGradient()

创建一个线性的渐变颜色

语法

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

参数

CanvasRenderingContext2D.createPattern()

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

语法

ctx.createPattern(image, repetition);

参数

路径

CanvasRenderingContext2D.beginPath()

开始创建一个新路径

语法

ctx.beginPath();

CanvasRenderingContext2D.closePath()

封闭一个路径

语法

ctx.closePath();

CanvasRenderingContext2D.moveTo()

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

语法

ctx.moveTo(x, y);

参数

CanvasRenderingContext2D.lineTo()

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

语法

ctx.lineTo(x, y);

参数

CanvasRenderingContext2D.bezierCurveTo()

绘制三次贝赛尔曲线路径

语法

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

参数

CanvasRenderingContext2D.quadraticCurveTo()

创建二次贝塞尔曲线路径

语法

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

参数

CanvasRenderingContext2D.arc()

画一条弧线

语法

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

参数

CanvasRenderingContext2D.arcTo()

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

语法

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

参数

CanvasRenderingContext2D.rect()

创建一个矩形

语法

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

参数

绘制路径

CanvasRenderingContext2D.fill()

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

语法

ctx.fill();

CanvasRenderingContext2D.stroke()

画出当前路径的边框

语法

ctx.stroke();

CanvasRenderingContext2D.clip()

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

语法

 ctx.clip();

变换

CanvasRenderingContext2D.rotate()

顺时针旋转当前坐标轴

语法

ctx.rotate(angle);

参数

CanvasRenderingContext2D.scale()

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

语法

ctx.scale(x, y);

参数

CanvasRenderingContext2D.setTransform()

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

语法

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

参数

CanvasRenderingContext2D.transform()

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

语法

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

参数

CanvasRenderingContext2D.translate()

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

语法

ctx.translate(x, y);

参数

合成

CanvasRenderingContext2D.globalAlpha

设置全局画笔透明度

语法

ctx.globalAlpha = value;

参数

绘制图像

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)

参数

Canvas 状态

CanvasRenderingContext2D.restore()

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

语法

ctx.restore();

CanvasRenderingContext2D.save()

保存当前的绘图上下文

语法

ctx.save();

像素操作 1030+

CanvasRenderingContext2D.createImageData()

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

语法

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

参数

返回值

CanvasRenderingContext2D.getImageData()

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

语法

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

参数

返回值

CanvasRenderingContext2D.putImageData()

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

语法

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

参数

CanvasRenderingContext2D.setLineDash() 1040+

设置虚线样式的方法

语法

ctx.setLineDash(segments);

参数

CanvasRenderingContext2D.getLineDash() 1040+

获取当前线段样式的方法

语法

ctx.getLineDash();

返回值

CanvasRenderingContext2D.lineDashOffset 1040+

设置虚线偏移量的属性

语法

ctx.lineDashOffset = value;

返回值

CanvasRenderingContext2D.globalCompositeOperation 1040+

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

语法

ctx.globalCompositeOperation = type;

参数

属性值

Image 1020+

概述

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

属性

事件

CanvasGradient 1020+

概述

渐变对象，通过 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);

参数

ImageData 1030+

概述

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

属性

canvas 示例代码

查看示例代码