my.createCanvasContext(canvasId)
mPaaS 10.1.32 及以上版本支持该接口。
创建 canvas 绘图上下文。该绘图上下文只作用于对应 canvasId 的 <canvas/>。
入参
参数 | 类型 | 说明 |
|---|---|---|
canvasId | String | 定义在 |
toTempFilePath
把当前画布的内容导出生成图片，并返回文件路径。
入参
参数 | 类型 | 必填 | 说明 | 基础库最低版本 |
|---|---|---|---|---|
x | Number | 否 | 画布 X 轴起点，默认为 0。 | - |
y | Number | 否 | 画布 Y 轴起点，默认为 0。 | - |
width | Number | 否 | 画布宽度，默认为画布宽度 X。 | - |
height | Number | 否 | 画布高度，默认为画布高度 Y。 | - |
destWidth | Number | 否 | 输出的图片宽度，默认为画布宽度。 | - |
destHeight | Number | 否 | 输出的图片高度，默认为画布高度。 | - |
fileType | String | 否 | 目标文件的类型。合法值为 | |
quality | Number | 否 | 图片的质量，目前仅对 | |
success | Function | 否 | 接口成功回调。 | - |
fail | Function | 否 | 接口失败回调。 | - |
complete | Function | 否 | 接口完成回调。 | - |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.toTempFilePath({
success() {},
});setTextAlign
textAlign 是 Canvas 2D API 描述绘制文本时，文本的对齐方式的属性。注意，该对齐是基于 CanvasRenderingContext2D.fillText 方法的 x 的值。所以，如果 textAlign=”center”，那么该文本将画在 x-50%*width。
入参
参数 | 类型 | 定义 |
|---|---|---|
textAlign | String | 枚举值： |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setTextAlign("left");
ctx.fillText("Hello world", 0, 100);setTextBaseline
textBaseline 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。
入参
参数 | 类型 | 定义 |
|---|---|---|
textBaseline | String | 枚举值： |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setTextBaseline("top");
ctx.fillText("Hello world", 0, 100);setFillStyle
设置填充色。
fillStyle，则默认颜色为 black。入参
参数 | 类型 | 定义 |
|---|---|---|
color | Color | 颜色。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(50, 50, 100, 175);
ctx.draw();setStrokeStyle
设置边框颜色。
如果没有设置 strokeStyle，则默认颜色为 black。
入参
参数 | 类型 | 定义 |
|---|---|---|
color | Color | 颜色。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setStrokeStyle('blue');
ctx.strokeRect(50, 50, 100, 175);
ctx.draw();setShadow
设置阴影样式。
如果没有设置，offsetX 的默认值为 0， offsetY 的默认值为 0， blur 的默认值为 0，color 的默认值为 black。
入参
参数 | 类型 | 取值范围 | 定义 |
|---|---|---|---|
offsetX | Number | - | 阴影相对于形状水平方向的偏移。 |
offsetY | Number | - | 阴影相对于形状竖直方向的偏移。 |
blur | Number | 0~100 | 阴影的模糊级别，值越大越模糊。 |
color | Color | - | 阴影颜色。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFillStyle('red');
ctx.setShadow(15, 45, 45, 'yellow');
ctx.fillRect(20, 20, 100, 175);
ctx.draw();createLinearGradient
创建一个线性的渐变色。
需要使用 addColorStop() 来指定渐变点，至少需要两个。
入参
参数 | 类型 | 定义 |
|---|---|---|
x0 | Number | 起点 X 坐标。 |
y0 | Number | 起点 Y 坐标。 |
x1 | Number | 终点 X 坐标。 |
y1 | Number | 终点 Y 坐标。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
const grd = ctx.createLinearGradient(10, 10, 150, 10);
grd.addColorStop(0, 'yellow');
grd.addColorStop(1, 'blue');
ctx.setFillStyle(grd);
ctx.fillRect(20, 20, 250, 180);
ctx.draw();createCircularGradient
创建一个圆形的渐变色。
起点在圆心，终点在圆环。需要使用 addColorStop() 来指定渐变点，至少需要两个。
入参
参数 | 类型 | 定义 |
|---|---|---|
x | Number | 圆心 X 坐标。 |
y | Number | 圆心 Y 坐标。 |
r | Number | 圆半径。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
const grd = ctx.createCircularGradient(90, 60, 60);
grd.addColorStop(0, 'blue');
grd.addColorStop(1, 'red');
ctx.setFillStyle(grd);
ctx.fillRect(20, 20, 250, 180);
ctx.draw();addColorStop
创建一个颜色的渐变点。
小于最小
stop的部分会按最小stop的颜色来渲染，大于最大stop的部分会按最大stop的颜色来渲染。需要使用
addColorStop()来指定渐变点，至少需要两个。
入参
参数 | 类型 | 定义 |
|---|---|---|
stop | Number | 表示渐变点在起点和终点中的位置，范围为 0～1。 |
color | Color | 渐变点颜色。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
const grd = ctx.createLinearGradient(40, 20, 230, 40);
grd.addColorStop(0.36, 'orange');
grd.addColorStop(0.56, 'cyan');
grd.addColorStop(0.63, 'yellow');
grd.addColorStop(0.76, 'blue');
grd.addColorStop(0.54, 'green');
grd.addColorStop(1, 'purple');
grd.addColorStop(0.4, 'red');
ctx.setFillStyle(grd);
ctx.fillRect(20, 20, 250, 180);
ctx.draw();setLineWidth
设置线条的宽度。
入参
参数 | 类型 | 说明 |
|---|---|---|
lineWidth | Number | 线条宽度，单位为 px。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(250, 10);
ctx.stroke();
ctx.beginPath();
ctx.setLineWidth(10);
ctx.moveTo(20, 35);
ctx.lineTo(250, 30);
ctx.stroke();
ctx.beginPath();
ctx.setLineWidth(20);
ctx.moveTo(20, 50);
ctx.lineTo(250, 55);
ctx.stroke();
ctx.beginPath();
ctx.setLineWidth(25);
ctx.moveTo(20, 80);
ctx.lineTo(250, 85);
ctx.stroke();
ctx.draw();setLineCap
设置线条的端点样式。
入参
参数 | 类型 | 范围 | 说明 |
|---|---|---|---|
lineCap | String |
| 线条的结束端点样式。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 10);
ctx.stroke();
ctx.beginPath();
ctx.setLineCap('round');
ctx.setLineWidth(20);
ctx.moveTo(20, 70);
ctx.lineTo(250, 80);
ctx.stroke();
ctx.beginPath();
ctx.setLineCap('butt');
ctx.setLineWidth(10);
ctx.moveTo(25, 80);
ctx.lineTo(250, 30);
ctx.stroke();
ctx.beginPath();
ctx.setLineCap('square');
ctx.setLineWidth(10);
ctx.moveTo(35, 47);
ctx.lineTo(230, 120);
ctx.stroke();
ctx.draw();setLineJoin
设置线条的交点样式。
入参
参数 | 类型 | 范围 | 说明 |
|---|---|---|---|
lineJoin | String |
| 线条的结束交点样式。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.moveTo(20, 30);
ctx.lineTo(150, 70);
ctx.lineTo(20, 100);
ctx.stroke();
ctx.beginPath();
ctx.setLineJoin('round');
ctx.setLineWidth(20);
ctx.moveTo(100, 20);
ctx.lineTo(280, 80);
ctx.lineTo(100, 100);
ctx.stroke();
ctx.beginPath();
ctx.setLineJoin('bevel');
ctx.setLineWidth(20);
ctx.moveTo(60, 25);
ctx.lineTo(180, 80);
ctx.lineTo(90, 100);
ctx.stroke();
ctx.beginPath();
ctx.setLineJoin('miter');
ctx.setLineWidth(15);
ctx.moveTo(130, 70);
ctx.lineTo(250, 50);
ctx.lineTo(230, 100);
ctx.stroke();
ctx.draw();setMiterLimit
设置最大斜接长度。
斜接长度指的是在两条线交汇处内角和外角之间的距离。当 setLineJoin() 为 miter 时才有效。超过最大倾斜长度时，连接处将以 lineJoin 为 bevel 来显示。
入参
参数 | 类型 | 说明 |
|---|---|---|
miterLimit | Number | 最大斜接长度。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.setLineWidth(15);
ctx.setLineJoin('miter');
ctx.setMiterLimit(1);
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.lineTo(10, 90);
ctx.stroke();
ctx.beginPath();
ctx.setLineWidth(15);
ctx.setLineJoin('miter');
ctx.setMiterLimit(2);
ctx.moveTo(50, 10);
ctx.lineTo(140, 50);
ctx.lineTo(50, 90);
ctx.stroke();
ctx.beginPath();
ctx.setLineWidth(15);
ctx.setLineJoin('miter');
ctx.setMiterLimit(3);
ctx.moveTo(90, 10);
ctx.lineTo(180, 50);
ctx.lineTo(90, 90);
ctx.stroke();
ctx.draw();rect
创建一个矩形。
用 fill() 或者 stroke() 方法将矩形画到画布中。
入参
参数 | 类型 | 说明 |
|---|---|---|
x | Number | 矩形左上角的 X 坐标。 |
y | Number | 矩形左上角的 Y 坐标。 |
width | Number | 矩形路径宽度。 |
height | Number | 矩形路径高度。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rect(20, 20, 250, 80);
ctx.setFillStyle('blue');
ctx.fill();
ctx.draw();fillRect
填充矩形。
用 setFillStyle() 设置矩形的填充色，如果没设置，则默认为 black。
入参
参数 | 类型 | 说明 |
|---|---|---|
x | Number | 矩形左上角的 x 坐标。 |
y | Number | 矩形左上角的 y 坐标。 |
width | Number | 矩形路径宽度。 |
height | Number | 矩形路径高度。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.fillRect(20, 20, 250, 80);
ctx.setFillStyle('blue');
ctx.draw();strokeRect
画一个矩形（非填充）。
setFillStroke() 设置矩形线条的颜色，如果没设置，则默认为 black。入参
参数 | 类型 | 说明 |
|---|---|---|
x | Number | 矩形左上角的 x 坐标。 |
y | Number | 矩形左上角的 y 坐标。 |
width | Number | 矩形路径宽度。 |
height | Number | 矩形路径高度。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setStrokeStyle('blue');
ctx.strokeRect(20, 20, 250, 80);
ctx.draw();clearRect
清除画布上在该矩形区域内的内容。
clearRect 并非在地址区域画一个白色的矩形，而是清空，为了有直观感受，可以对画布加了一层背景色。<canvas id="awesomeCanvas" style="border: 1px solid; background: red;"/>入参
参数 | 类型 | 说明 |
|---|---|---|
x | Number | 矩形左上角的 X 坐标。 |
y | Number | 矩形左上角的 Y 坐标。 |
width | Number | 矩形宽度。 |
height | Number | 矩形高度。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(250, 10, 250, 200);
ctx.setFillStyle('yellow');
ctx.fillRect(0, 0, 150, 200);
ctx.clearRect(10, 10, 150, 75);
ctx.draw();fill
对当前路径中的内容进行填充。默认的填充色为 black。
如果当前路径没有闭合，
fill()方法会将起点和终点进行连接，然后填充，详情见例一。fill()填充的路径是从beginPath()开始计算，但是不会将fillRect()包含进去，详情见例二。
代码示例
代码示例 1
const ctx = my.createCanvasContext('awesomeCanvas') ctx.moveTo(20, 20) ctx.lineTo(200, 20) ctx.lineTo(200, 200) ctx.fill() ctx.draw()代码示例 2
const ctx = my.createCanvasContext('awesomeCanvas'); ctx.rect(20, 20, 110, 40); ctx.setFillStyle('blue'); ctx.fill(); ctx.beginPath(); ctx.rect(20, 30, 150, 40); ctx.setFillStyle('yellow'); ctx.fillRect(20, 80, 150, 40); ctx.rect(20, 150, 150, 40); ctx.setFillStyle('red'); ctx.fill(); ctx.draw();
stroke
画出当前路径的边框。
stroke() 描绘的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去，详情见例二。
代码示例
代码示例 1
const ctx = my.createCanvasContext('awesomeCanvas'); ctx.moveTo(20, 20); ctx.lineTo(150, 10); ctx.lineTo(150, 150); ctx.stroke(); ctx.draw();代码示例 2
const ctx = my.createCanvasContext('awesomeCanvas'); ctx.rect(10, 10, 100, 30); ctx.setStrokeStyle('blue'); ctx.stroke(); ctx.beginPath(); ctx.rect(20, 50, 150, 50); ctx.setStrokeStyle('yellow'); ctx.strokeRect(15, 75, 200, 35); ctx.rect(20, 200, 150, 30); ctx.setStrokeStyle('red'); ctx.stroke(); ctx.draw();
beginPath
开始创建一个路径，需要调用 fill 或者 stroke 才会使用路径进行填充或描边。
在最开始的时候相当于调用了一次
beginPath()。同一个路径内的多次
setFillStyle()、setStrokeStyle()、setLineWidth()等设置，以最后一次设置为准。
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rect(20, 20, 150, 50);
ctx.setFillStyle('blue');
ctx.fill();
ctx.beginPath();
ctx.rect(20, 50, 150, 40);
ctx.setFillStyle('yellow');
ctx.fillRect(20, 170, 150, 40);
ctx.rect(10, 100, 100, 30);
ctx.setFillStyle('red');
ctx.fill();
ctx.draw();closePath
关闭一个路径。
关闭路径会连接起点和终点。
如果关闭路径后没有调用
fill()或者stroke()并开启了新的路径，那么之前的路径将不会被渲染。
代码示例
代码示例 1
const ctx = my.createCanvasContext('awesomeCanvas'); ctx.moveTo(20, 20); ctx.lineTo(150, 20); ctx.lineTo(150, 150); ctx.closePath(); ctx.stroke(); ctx.draw();代码示例 2
const ctx = my.createCanvasContext('awesomeCanvas'); ctx.rect(20, 20, 150, 50); ctx.closePath(); ctx.beginPath(); ctx.rect(20, 50, 150, 40); ctx.setFillStyle('red'); ctx.fillRect(20, 80, 120, 30); ctx.rect(20, 150, 150, 40); ctx.setFillStyle('blue'); ctx.fill(); ctx.draw();
moveTo
把路径移动到画布中的指定点，不创建线条。用 stroke() 方法来画线条。
入参
参数 | 类型 | 说明 |
|---|---|---|
x | Number | 目标位置 X 坐标。 |
y | Number | 目标位置 Y 坐标。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.moveTo(20, 20);
ctx.lineTo(150, 15);
ctx.moveTo(20, 55);
ctx.lineTo(120, 60);
ctx.stroke();
ctx.draw();lineTo
通过 lineTo 方法增加一个新点，然后创建一条从上次指定点到目标点的线。
stroke() 方法来画线条。入参
参数 | 类型 | 说明 |
|---|---|---|
x | Number | 目标位置 X 坐标。 |
y | Number | 目标位置 Y 坐标。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.moveTo(20, 20);
ctx.rect(20, 20, 80, 30);
ctx.lineTo(120, 80);
ctx.stroke();
ctx.draw();arc
画一条弧线。
创建一个圆可以用
arc()方法指定起始弧度为 0，终止弧度为2 * Math.PI。用
stroke()或者fill()方法来在画布中画弧线。
入参
参数 | 类型 | 说明 |
|---|---|---|
x | Number | 圆 X 坐标。 |
y | Number | 圆 Y 坐标。 |
r | Number | 圆半径。 |
sAngle | Number | 起始弧度，单位弧度（在 3 点钟方向）。 |
eAngle | Number | 终止弧度。 |
counterclockwise | Boolean | 可选，指定弧度的方向是逆时针还是顺时针，默认为 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.arc(200, 75, 50, 0, 2 * Math.PI);
ctx.setFillStyle('#CCCCCC');
ctx.fill();
ctx.beginPath();
ctx.moveTo(50, 65);
ctx.lineTo(170, 80);
ctx.moveTo(200, 35);
ctx.lineTo(200, 235);
ctx.setStrokeStyle('#AAAAAA');
ctx.stroke();
ctx.setFontSize(12);
ctx.setFillStyle('yellow');
ctx.fillText('0', 165, 78);
ctx.fillText('0.6*PI', 96, 148);
ctx.fillText('1*PI', 15, 57);
ctx.fillText('1.7*PI', 94, 20);
ctx.beginPath();
ctx.arc(200, 85, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();
ctx.beginPath();
ctx.arc(200, 35, 2, 0, 2 * Math.PI);
ctx.setFillStyle('green');
ctx.fill();
ctx.beginPath();
ctx.arc(450, 60, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();
ctx.beginPath();
ctx.arc(150, 35, 50, 0, 1.8 * Math.PI);
ctx.setStrokeStyle('#666666');
ctx.stroke();
ctx.draw();针对 arc(150, 35, 50, 0, 1.8 * Math.PI) 的三个关键坐标如下：
绿色：圆心（15, 35）
红色：起始弧度（0）
蓝色：终止弧度（
1.8 * Math.P）
bezierCurveTo
创建三次方贝塞尔曲线路径。
入参
参数 | 类型 | 说明 |
|---|---|---|
cp1x | Number | 第一个贝塞尔控制点 X 坐标。 |
cp1y | Number | 第一个贝塞尔控制点 Y 坐标。 |
cp2x | Number | 第二个贝塞尔控制点 X 坐标。 |
cp2y | Number | 第二个贝塞尔控制点 Y 坐标。 |
x | Number | 结束点 X 坐标。 |
y | Number | 结束点 Y 坐标。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.arc(30, 30, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();
ctx.beginPath();
ctx.arc(250, 25, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();
ctx.beginPath();
ctx.arc(20, 100, 2, 0, 2 * Math.PI);
ctx.arc(200, 100, 2, 0, 2 * Math.PI);
ctx.setFillStyle('green');
ctx.fill();
ctx.setFillStyle('yellow');
ctx.setFontSize(14);
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(30, 100);
ctx.lineTo(150, 75);
ctx.moveTo(250, 30);
ctx.lineTo(250, 80);
ctx.lineTo(70, 75);
ctx.setStrokeStyle('#EEEEEE');
ctx.stroke();
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.bezierCurveTo(30, 150, 250, 150, 180, 20);
ctx.setStrokeStyle('black');
ctx.stroke();
ctx.draw();针对 moveTo(30, 30)，bezierCurveTo(30, 150, 250, 150, 180, 20) 的三个关键坐标如下：
红色：起始点（20, 20）
蓝色：两个控制点（20, 150），（250, 150）
绿色：终止点（180, 20）
clip
将当前创建的路径设置为当前剪切路径。
代码示例
//.js
const ctx = my.createCanvasContext('awesomeCanvas')
my.downloadFile({
url: 'https://gw.alipayobjects.com/zos/skylark-tools/public/files/dda114e320567e1d304790287d75a029.png',
success: function(res) {
ctx.save()
ctx.beginPath()
ctx.arc(50, 50, 25, 0, 2*Math.PI)
ctx.clip()
ctx.drawImage(res.tempFilePath, 25, 25)
ctx.restore()
ctx.draw()
}
})quadraticCurveTo
创建二次贝塞尔曲线路径。
入参
参数 | 类型 | 说明 |
|---|---|---|
cpx | Number | 贝塞尔控制点 X 坐标。 |
cpy | Number | 贝塞尔控制点 Y 坐标。 |
x | Number | 结束点 X 坐标。 |
y | Number | 结束点 Y 坐标。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.arc(30, 30, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();
ctx.beginPath();
ctx.arc(250, 20, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();
ctx.beginPath();
ctx.arc(30, 200, 2, 0, 2 * Math.PI);
ctx.setFillStyle('green');
ctx.fill();
ctx.setFillStyle('black');
ctx.setFontSize(12);
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(30, 150);
ctx.lineTo(250, 30);
ctx.setStrokeStyle('#AAAAAA');
ctx.stroke();
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.quadraticCurveTo(30, 150, 250, 25);
ctx.setStrokeStyle('black');
ctx.stroke();
ctx.draw();针对 moveTo(30, 30)，quadraticCurveTo(30, 150, 250, 25) 的三个关键坐标如下：
红色：起始点（30, 30）
蓝色：控制点（30, 150）
绿色：终止点（250, 25）
scale
在调用 scale 方法后，之后创建的路径其横纵坐标会被缩放。多次调用 scale，倍数会相乘。
入参
参数 | 类型 | 说明 |
|---|---|---|
scaleWidth | Number | 横坐标缩放倍数（1 = 100%，0.5 = 50%，2 = 200%）。 |
scaleHeight | Number | 纵坐标轴缩放倍数（1 = 100%，0.5 = 50%，2 = 200%）。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.strokeRect(15, 15, 30, 25);
ctx.scale(3, 3);
ctx.strokeRect(15, 15, 30, 25);
ctx.scale(3, 3);
ctx.strokeRect(15, 15, 30, 25);
ctx.draw();rotate
以原点为中心，原点可以用 translate 方法修改。顺时针旋转当前坐标轴。多次调用 rotate，旋转的角度会叠加。
入参
参数 | 类型 | 说明 |
|---|---|---|
rotate | Number | 旋转角度，以弧度计（degrees * Math.PI/180；degrees 范围为 0~360）。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.strokeRect(200, 20, 180, 150);
ctx.rotate(30 * Math.PI / 180);
ctx.strokeRect(200, 20, 180, 150);
ctx.rotate(30 * Math.PI / 180);
ctx.strokeRect(200, 20, 180, 150);
ctx.draw();translate
对当前坐标系的原点（0, 0）进行变换，默认的坐标系原点为页面左上角。
入参
参数 | 类型 | 说明 |
|---|---|---|
x | Number | 水平坐标平移量。 |
y | Number | 竖直坐标平移量。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.strokeRect(20, 20, 250, 80);
ctx.translate(30, 30);
ctx.strokeRect(20, 20, 250, 80);
ctx.translate(30, 30);
ctx.strokeRect(20, 20, 250, 80);
ctx.draw();setFontSize
设置字体大小。
入参
参数 | 类型 | 说明 |
|---|---|---|
fontSize | Number | 字号。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas')；
ctx.setFontSize(14)；
ctx.fillText('14', 20, 20)；；；
ctx.setFontSize(22)
ctx.fillText('22', 40, 40)
ctx.setFontSize(30)；
ctx.fillText('30', 60, 60)；
ctx.setFontSize(38)；
ctx.fillText('38', 90, 90)；
ctx.draw()；fillText
在画布上绘制被填充的文本。
入参
参数 | 类型 | 说明 |
|---|---|---|
text | String | 文本 |
x | Number | 绘制文本的左上角 X 坐标。 |
y | Number | 绘制文本的左上角 Y 坐标。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas')；
ctx.setFontSize(42)
ctx.fillText('Hello', 30, 30)；；
ctx.fillText('alipay', 200, 200)
ctx.draw()；drawImage
绘制图像，图像保持原始尺寸。
入参
参数 | 类型 | 说明 |
|---|---|---|
imageResource | String | 图片资源，只支持线上 CDN 地址或小程序包地址，线上 CDN 需返回头 |
x | Number | 图像左上角 X 坐标。 |
y | Number | 图像左上角 Y 坐标。 |
width | Number | 图像宽度。 |
height | Number | 图像高度。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas')；
ctx.drawImage('https://img.alicdn.com/tfs/TB1GvVMj2BNTKJjy0FdXXcPpVXa-520-280.jpg', 2, 2, 250, 80)；
ctx.draw()；setGlobalAlpha
设置全局画笔透明度。
入参
参数 | 类型 | 取值范围 | 说明 |
|---|---|---|---|
alpha | Number | 0 或 1 | 透明度：
|
代码示例
const ctx = my.createCanvasContext('awesomeCanvas')；
ctx.setFillStyle('yellow')；
ctx.fillRect(10, 10, 150, 100)；
ctx.setGlobalAlpha(0.2)；
ctx.setFillStyle('blue')；
ctx.fillRect(50, 50, 150, 100)；
ctx.setFillStyle('red')；
ctx.fillRect(100, 100, 150, 100)；
ctx.draw();setLineDash
设置虚线的样式。
入参
参数 | 类型 | 说明 |
|---|---|---|
segments | Array | 一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas')；
ctx.setLineDash([5, 15, 25]);
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.draw();transform
使用矩阵多次叠加当前变换的方法，矩阵由方法的参数进行描述。你可以缩放、旋转、移动和倾斜上下文。
入参
参数 | 类型 | 说明 |
|---|---|---|
scaleX | Number | 水平缩放。 |
skewX | Number | 水平倾斜。 |
skewY | Number | 垂直倾斜。 |
scaleY | Number | 垂直缩放。 |
translateX | Number | 水平移动。 |
translateY | Number | 垂直移动。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas')；
ctx.rotate(45 * Math.PI / 180);
ctx.setFillStyle('red');
ctx.fillRect(70,0,100,30);
ctx.transform(1, 1, 0, 1, 0, 0);
ctx.setFillStyle('#000');
ctx.fillRect(0, 0, 100, 100);
ctx.draw();setTransform
使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。
入参
参数 | 类型 | 说明 |
|---|---|---|
scaleX | Number | 水平缩放。 |
skewX | Number | 水平倾斜。 |
skewY | Number | 垂直倾斜。 |
scaleY | Number | 垂直缩放。 |
translateX | Number | 水平移动。 |
translateY | Number | 垂直移动。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas')；
ctx.rotate(45 * Math.PI / 180);
ctx.setFillStyle('red');
ctx.fillRect(70,0,100,30);
ctx.setTransform(1, 1, 0, 1, 0, 0);
ctx.setFillStyle('#000');
ctx.fillRect(0, 0, 100, 100);
ctx.draw();getImageData
获取画布区域隐含的像素数据。
基础库最低版本要求为 1.10。
入参
入参 | 类型 | 必填 | 说明 |
|---|---|---|---|
x | Number | 是 | 将要被提取的图像数据矩形区域的左上角横坐标。 |
y | Number | 是 | 将要被提取的图像数据矩形区域的左上角纵坐标。 |
width | Number | 是 | 将要被提取的图像数据矩形区域的宽度。 |
height | Number | 是 | 将要被提取的图像数据矩形区域的高度。 |
success | Function | 否 | 成功回调。 |
fail | Function | 否 | 失败回调。 |
complete | Function | 否 | 完成回调。 |
success 回调
参数
属性 | 类型 | 说明 |
|---|---|---|
width | Number | 图像数据矩形区域的宽度。 |
height | Number | 图像数据矩形区域的高度。 |
代码示例
const ctx = my.createCanvasContext('awesomeCanvas')；
ctx.getImageData({
x: 0,
y: 0,
width: 100,
height: 100,
success(res) {
console.log(res.width) // 100
console.log(res.height) // 100
console.log(res.data instanceof Uint8ClampedArray) // true
console.log(res.data.length) // 100 * 100 * 4
}
})putImageData
将像素数据绘制到画布。
基础库最低版本要求为 1.11。
入参
参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
data | Uint8ClampedArray | 是 | 图像像素点数据，一维数组，每四项表示一个像素点的 |
x | Number | 是 | 源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）。 |
y | Number | 是 | 源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）。 |
width | Number | 是 | 源图像数据矩形区域的宽度。 |
height | Number | 是 | 源图像数据矩形区域的高度。 |
success | Function | 否 | 成功回调。 |
fail | Function | 否 | 失败回调。 |
complete | Function | 否 | 完成回调。 |
代码示例
const data = new Uint8ClampedArray([255, 0, 0, 1])
const ctx = my.createCanvasContext('awesomeCanvas')；
ctx.putImageData({
x: 0,
y: 0,
width: 1,
height: 1,
data: data,
success(res) {}
})save
保存当前的绘图上下文。
代码示例
//.js
const ctx = my.createCanvasContext('myCanvas')
// save the default fill style
ctx.save()
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
// restore to the previous saved state
ctx.restore()
ctx.fillRect(50, 50, 150, 100)
ctx.draw()restore
恢复之前保存的绘图上下文。
代码示例
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.save();
ctx.setFillStyle('red');
ctx.fillRect(20, 20, 250, 80);
ctx.restore();
ctx.fillRect(60, 60, 155, 130);
ctx.draw();draw
将之前在绘图上下文中的描述（路径、变形、样式）画到画布中。
绘图上下文需要由 my.createCanvasContext(canvasId) 来创建。
入参
参数 | 类型 | 说明 | 基础库最低版本 |
|---|---|---|---|
reserve | Boolean | 非必填。本次绘制是否接着上一次绘制，即 | - |
callback | Function | 必填项。绘制完成后执行的回调函数。 |
代码示例
代码示例 1
const ctx = my.createCanvasContext('awesomeCanvas'); ctx.setFillStyle('blue'); ctx.fillRect(20, 20, 180, 80); ctx.draw(); ctx.fillRect(60, 60, 250, 120); // 保留上一次的绘制结果 ctx.draw(true);代码示例 2
//.js const ctx = my.createCanvasContext('awesomeCanvas') ctx.setFillStyle('blue') ctx.fillRect(20, 20, 180, 80) ctx.draw() ctx.fillRect(60, 60, 250, 120) // 不保留上一次的绘制结果 ctx.draw(false)