阿里云首页 移动开发平台 mPaaS

画布

my.createCanvasContext(canvasId)

说明：mPaaS 10.1.32 及以上版本支持该接口。


创建 canvas 绘图上下文。该绘图上下文只作用于对应 canvasId 的 <canvas/>。

入参

参数 类型 说明
canvasId String 定义在 <canvas/> 上的 ID。

toTempFilePath

把当前画布的内容导出生成图片，并返回文件路径。

入参

参数 类型 必填 说明 基础库最低版本
x Number 否 画布 X 轴起点，默认为 0。 -
y Number 否 画布 Y 轴起点，默认为 0。 -
width Number 否 画布宽度，默认为画布宽度 X。 -
height Number 否 画布高度，默认为画布高度 Y。 -
destWidth Number 否 输出的图片宽度，默认为画布宽度。 -
destHeight Number 否 输出的图片高度，默认为画布高度。 -
fileType String 否 目标文件的类型。合法值为 jpg、png，默认值为 1。mPaaS 10.1.60 及以上版本支持。 1.10
quality Number 否 图片的质量，目前仅对 jpg 有效，取值范围为 (0, 1]，不在范围内时当作 1.0 处理。mPaaS 10.1.60 及以上版本支持。 1.10
success Function 否 接口成功回调。 -
fail Function 否 接口失败回调。 -
complete Function 否 接口完成回调。 -

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.toTempFilePath({
  3.   success() {},
  4. });

setTextAlign

textAlign 是 Canvas 2D API 描述绘制文本时，文本的对齐方式的属性。注意，该对齐是基于 CanvasRenderingContext2D.fillText 方法的 x 的值。所以，如果 textAlign=”center”，那么该文本将画在 x-50%*width。

入参

参数 类型 定义
textAlign String 枚举值：left、right、center、start、end。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setTextAlign("left");
  3. ctx.fillText("Hello world", 0, 100);

setTextBaseline

textBaseline 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。

入参

参数 类型 定义
textBaseline String 枚举值：top、hanging、middle、alphabetic、ideographic、bottom。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setTextBaseline("top");
  3. ctx.fillText("Hello world", 0, 100);

setFillStyle

设置填充色。

说明：如果没有设置 fillStyle，则默认颜色为 black。

入参

参数 类型 定义
color Color 颜色。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setFillStyle('blue');
  3. ctx.fillRect(50, 50, 100, 175);
  4. ctx.draw();

setStrokeStyle

设置边框颜色。

说明：如果没有设置 strokeStyle，则默认颜色为 black。

入参

参数 类型 定义
color Color 颜色。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setStrokeStyle('blue');
  3. ctx.strokeRect(50, 50, 100, 175);
  4. ctx.draw();

setShadow

设置阴影样式。

说明：如果没有设置，offsetX 的默认值为 0， offsetY 的默认值为 0， blur 的默认值为 0，color 的默认值为 black。

入参

参数 类型 取值范围 定义
offsetX Number 阴影相对于形状水平方向的偏移。
offsetY Number 阴影相对于形状竖直方向的偏移。
blur Number 0~100 阴影的模糊级别，值越大越模糊。
color Color 阴影颜色。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setFillStyle('red');
  3. ctx.setShadow(15, 45, 45, 'yellow');
  4. ctx.fillRect(20, 20, 100, 175);
  5. ctx.draw();

createLinearGradient

创建一个线性的渐变色。

说明：需要使用 addColorStop() 来指定渐变点，至少需要两个。

入参

参数 类型 定义
x0 Number 起点 X 坐标。
y0 Number 起点 Y 坐标。
x1 Number 终点 X 坐标。
y1 Number 终点 Y 坐标。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  3. const grd = ctx.createLinearGradient(10, 10, 150, 10);
  4. grd.addColorStop(0, 'yellow');
  5. grd.addColorStop(1, 'blue');
  7. ctx.setFillStyle(grd);
  8. ctx.fillRect(20, 20, 250, 180);
  9. ctx.draw();

createCircularGradient

创建一个圆形的渐变色。起点在圆心，终点在圆环。

说明：需要使用 addColorStop() 来指定渐变点，至少需要两个。

入参

参数 类型 定义
x Number 圆心 X 坐标。
y Number 圆心 Y 坐标。
r Number 圆半径。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  3. const grd = ctx.createCircularGradient(90, 60, 60);
  4. grd.addColorStop(0, 'blue');
  5. grd.addColorStop(1, 'red');
  7. ctx.setFillStyle(grd);
  8. ctx.fillRect(20, 20, 250, 180);
  9. ctx.draw();

addColorStop

创建一个颜色的渐变点。

小于最小 stop 的部分会按最小 stop 的颜色来渲染，大于最大 stop 的部分会按最大 stop 的颜色来渲染。

需要使用 addColorStop() 来指定渐变点，至少需要两个。

入参

参数 类型 定义
stop Number 表示渐变点在起点和终点中的位置，范围为 0～1。
color Color 渐变点颜色。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  3. const grd = ctx.createLinearGradient(40, 20, 230, 40);
  4. grd.addColorStop(0.36, 'orange');
  5. grd.addColorStop(0.56, 'cyan');
  6. grd.addColorStop(0.63, 'yellow');
  7. grd.addColorStop(0.76, 'blue');
  8. grd.addColorStop(0.54, 'green');
  9. grd.addColorStop(1, 'purple');
  10. grd.addColorStop(0.4, 'red');
  12. ctx.setFillStyle(grd);
  13. ctx.fillRect(20, 20, 250, 180);
  14. ctx.draw();

setLineWidth

设置线条的宽度。

入参

参数 类型 说明
lineWidth Number 线条宽度，单位为 px。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.beginPath();
  3. ctx.moveTo(20, 20);
  4. ctx.lineTo(250, 10);
  5. ctx.stroke();
  7. ctx.beginPath();
  8. ctx.setLineWidth(10);
  9. ctx.moveTo(20, 35);
  10. ctx.lineTo(250, 30);
  11. ctx.stroke();
  13. ctx.beginPath();
  14. ctx.setLineWidth(20);
  15. ctx.moveTo(20, 50);
  16. ctx.lineTo(250, 55);
  17. ctx.stroke();
  19. ctx.beginPath();
  20. ctx.setLineWidth(25);
  21. ctx.moveTo(20, 80);
  22. ctx.lineTo(250, 85);
  23. ctx.stroke();
  25. ctx.draw();

setLineCap

设置线条的端点样式。

入参

参数 类型 范围 说明
lineCap String round、butt、square 线条的结束端点样式。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.beginPath();
  3. ctx.moveTo(10, 10);
  4. ctx.lineTo(150, 10);
  5. ctx.stroke();
  7. ctx.beginPath();
  8. ctx.setLineCap('round');
  9. ctx.setLineWidth(20);
  10. ctx.moveTo(20, 70);
  11. ctx.lineTo(250, 80);
  12. ctx.stroke();
  14. ctx.beginPath();
  15. ctx.setLineCap('butt');
  16. ctx.setLineWidth(10);
  17. ctx.moveTo(25, 80);
  18. ctx.lineTo(250, 30);
  19. ctx.stroke();
  21. ctx.beginPath();
  22. ctx.setLineCap('square');
  23. ctx.setLineWidth(10);
  24. ctx.moveTo(35, 47);
  25. ctx.lineTo(230, 120);
  26. ctx.stroke();
  28. ctx.draw();

setLineJoin

设置线条的交点样式。

入参

参数 类型 范围 说明
lineJoin String round、bevel、miter 线条的结束交点样式。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.beginPath();
  3. ctx.moveTo(20, 30);
  4. ctx.lineTo(150, 70);
  5. ctx.lineTo(20, 100);
  6. ctx.stroke();
  8. ctx.beginPath();
  9. ctx.setLineJoin('round');
  10. ctx.setLineWidth(20);
  11. ctx.moveTo(100, 20);
  12. ctx.lineTo(280, 80);
  13. ctx.lineTo(100, 100);
  14. ctx.stroke();
  16. ctx.beginPath();
  17. ctx.setLineJoin('bevel');
  18. ctx.setLineWidth(20);
  19. ctx.moveTo(60, 25);
  20. ctx.lineTo(180, 80);
  21. ctx.lineTo(90, 100);
  22. ctx.stroke();
  24. ctx.beginPath();
  25. ctx.setLineJoin('miter');
  26. ctx.setLineWidth(15);
  27. ctx.moveTo(130, 70);
  28. ctx.lineTo(250, 50);
  29. ctx.lineTo(230, 100);
  30. ctx.stroke();
  32. ctx.draw();

setMiterLimit

设置最大斜接长度。

斜接长度指的是在两条线交汇处内角和外角之间的距离。当 setLineJoin() 为 miter 时才有效。超过最大倾斜长度时，连接处将以 lineJoin 为 bevel 来显示。

入参

参数 类型 说明
miterLimit Number 最大斜接长度。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.beginPath();
  3. ctx.setLineWidth(15);
  4. ctx.setLineJoin('miter');
  5. ctx.setMiterLimit(1);
  6. ctx.moveTo(10, 10);
  7. ctx.lineTo(100, 50);
  8. ctx.lineTo(10, 90);
  9. ctx.stroke();
  11. ctx.beginPath();
  12. ctx.setLineWidth(15);
  13. ctx.setLineJoin('miter');
  14. ctx.setMiterLimit(2);
  15. ctx.moveTo(50, 10);
  16. ctx.lineTo(140, 50);
  17. ctx.lineTo(50, 90);
  18. ctx.stroke();
  20. ctx.beginPath();
  21. ctx.setLineWidth(15);
  22. ctx.setLineJoin('miter');
  23. ctx.setMiterLimit(3);
  24. ctx.moveTo(90, 10);
  25. ctx.lineTo(180, 50);
  26. ctx.lineTo(90, 90);
  27. ctx.stroke();
  29. ctx.draw();

rect

创建一个矩形。

用 fill() 或者 stroke() 方法将矩形画到画布中。

入参

参数 类型 说明
x Number 矩形左上角的 X 坐标。
y Number 矩形左上角的 Y 坐标。
width Number 矩形路径宽度。
height Number 矩形路径高度。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.rect(20, 20, 250, 80);
  3. ctx.setFillStyle('blue');
  4. ctx.fill();
  5. ctx.draw();

fillRect

填充矩形。

用 setFillStyle() 设置矩形的填充色，如果没设置，则默认为 black。

入参

参数 类型 说明
x Number 矩形左上角的 x 坐标。
y Number 矩形左上角的 y 坐标。
width Number 矩形路径宽度。
height Number 矩形路径高度。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.fillRect(20, 20, 250, 80);
  3. ctx.setFillStyle('blue');
  4. ctx.draw();

strokeRect

画一个矩形（非填充）。

说明：用 setFillStroke() 设置矩形线条的颜色，如果没设置，则默认为 black。

入参

参数 类型 说明
x Number 矩形左上角的 x 坐标。
y Number 矩形左上角的 y 坐标。
width Number 矩形路径宽度。
height Number 矩形路径高度。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setStrokeStyle('blue');
  3. ctx.strokeRect(20, 20, 250, 80);
  4. ctx.draw();

clearRect

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

说明：clearRect 并非在地址区域画一个白色的矩形，而是清空，为了有直观感受，可以对画布加了一层背景色。
  1. <canvas id="awesomeCanvas" style="border: 1px solid; background: red;"/>

入参

参数 类型 说明
x Number 矩形左上角的 X 坐标。
y Number 矩形左上角的 Y 坐标。
width Number 矩形宽度。
height Number 矩形高度。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setFillStyle('blue');
  3. ctx.fillRect(250, 10, 250, 200);
  4. ctx.setFillStyle('yellow');
  5. ctx.fillRect(0, 0, 150, 200);
  6. ctx.clearRect(10, 10, 150, 75);
  7. ctx.draw();

fill

对当前路径中的内容进行填充。默认的填充色为 black。

说明：
  • 如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充，详情见例一。
  • fill() 填充的路径是从 beginPath() 开始计算，但是不会将 fillRect() 包含进去，详情见例二。

代码示例

  • 代码示例 1
    1. const ctx = my.createCanvasContext('awesomeCanvas')
    2. ctx.moveTo(20, 20)
    3. ctx.lineTo(200, 20)
    4. ctx.lineTo(200, 200)
    5. ctx.fill()
    6. ctx.draw()
  • 代码示例 2
    1. const ctx = my.createCanvasContext('awesomeCanvas');
    2. ctx.rect(20, 20, 110, 40);
    3. ctx.setFillStyle('blue');
    4. ctx.fill();
    5. ctx.beginPath();
    6. ctx.rect(20, 30, 150, 40);
    7. ctx.setFillStyle('yellow');
    8. ctx.fillRect(20, 80, 150, 40);
    9. ctx.rect(20, 150, 150, 40);
    10. ctx.setFillStyle('red');
    11. ctx.fill();
    12. ctx.draw();

stroke

画出当前路径的边框。

说明：stroke() 描绘的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去，详情见例二。

代码示例

  • 代码示例 1
    1. const ctx = my.createCanvasContext('awesomeCanvas');
    2. ctx.moveTo(20, 20);
    3. ctx.lineTo(150, 10);
    4. ctx.lineTo(150, 150);
    5. ctx.stroke();
    6. ctx.draw();
  • 代码示例 2
    1. const ctx = my.createCanvasContext('awesomeCanvas');
    2. ctx.rect(10, 10, 100, 30);
    3. ctx.setStrokeStyle('blue');
    4. ctx.stroke();
    5. ctx.beginPath();
    6. ctx.rect(20, 50, 150, 50);
    7. ctx.setStrokeStyle('yellow');
    8. ctx.strokeRect(15, 75, 200, 35);
    9. ctx.rect(20, 200, 150, 30);
    10. ctx.setStrokeStyle('red');
    11. ctx.stroke();
    12. ctx.draw();

beginPath

开始创建一个路径，需要调用 fill 或者 stroke 才会使用路径进行填充或描边。

说明：
  • 在最开始的时候相当于调用了一次 beginPath()。
  • 同一个路径内的多次 setFillStyle()、setStrokeStyle()、setLineWidth()等设置，以最后一次设置为准。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  3. ctx.rect(20, 20, 150, 50);
  4. ctx.setFillStyle('blue');
  5. ctx.fill();
  7. ctx.beginPath();
  8. ctx.rect(20, 50, 150, 40);
  10. ctx.setFillStyle('yellow');
  11. ctx.fillRect(20, 170, 150, 40);
  13. ctx.rect(10, 100, 100, 30);
  15. ctx.setFillStyle('red');
  16. ctx.fill();
  17. ctx.draw();

closePath

关闭一个路径。

说明：
  • 关闭路径会连接起点和终点。
  • 如果关闭路径后没有调用 fill() 或者 stroke() 并开启了新的路径，那么之前的路径将不会被渲染。

代码示例

  • 代码示例 1
    1. const ctx = my.createCanvasContext('awesomeCanvas');
    2. ctx.moveTo(20, 20);
    3. ctx.lineTo(150, 20);
    4. ctx.lineTo(150, 150);
    5. ctx.closePath();
    6. ctx.stroke();
    7. ctx.draw();
  • 代码示例 2
    1. const ctx = my.createCanvasContext('awesomeCanvas');
    2. ctx.rect(20, 20, 150, 50);
    3. ctx.closePath();
    4. ctx.beginPath();
    5. ctx.rect(20, 50, 150, 40);
    6. ctx.setFillStyle('red');
    7. ctx.fillRect(20, 80, 120, 30);
    8. ctx.rect(20, 150, 150, 40);
    9. ctx.setFillStyle('blue');
    10. ctx.fill();
    11. ctx.draw();

moveTo

把路径移动到画布中的指定点，不创建线条。

说明：用 stroke() 方法来画线条。

入参

参数 类型 说明
x Number 目标位置 X 坐标。
y Number 目标位置 Y 坐标。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.moveTo(20, 20);
  3. ctx.lineTo(150, 15);
  5. ctx.moveTo(20, 55);
  6. ctx.lineTo(120, 60);
  7. ctx.stroke();
  8. ctx.draw();

lineTo

通过 lineTo 方法增加一个新点，然后创建一条从上次指定点到目标点的线。

说明：用 stroke() 方法来画线条。

入参

参数 类型 说明
x Number 目标位置 X 坐标。
y Number 目标位置 Y 坐标。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.moveTo(20, 20);
  3. ctx.rect(20, 20, 80, 30);
  4. ctx.lineTo(120, 80);
  5. ctx.stroke();
  6. 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 可选，指定弧度的方向是逆时针还是顺时针，默认为 false。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  3. ctx.arc(200, 75, 50, 0, 2 * Math.PI);
  4. ctx.setFillStyle('#CCCCCC');
  5. ctx.fill();
  7. ctx.beginPath();
  8. ctx.moveTo(50, 65);
  9. ctx.lineTo(170, 80);
  10. ctx.moveTo(200, 35);
  11. ctx.lineTo(200, 235);
  12. ctx.setStrokeStyle('#AAAAAA');
  13. ctx.stroke();
  15. ctx.setFontSize(12);
  16. ctx.setFillStyle('yellow');
  17. ctx.fillText('0', 165, 78);
  18. ctx.fillText('0.6*PI', 96, 148);
  19. ctx.fillText('1*PI', 15, 57);
  20. ctx.fillText('1.7*PI', 94, 20);
  22. ctx.beginPath();
  23. ctx.arc(200, 85, 2, 0, 2 * Math.PI);
  24. ctx.setFillStyle('blue');
  25. ctx.fill();
  27. ctx.beginPath();
  28. ctx.arc(200, 35, 2, 0, 2 * Math.PI);
  29. ctx.setFillStyle('green');
  30. ctx.fill();
  32. ctx.beginPath();
  33. ctx.arc(450, 60, 2, 0, 2 * Math.PI);
  34. ctx.setFillStyle('red');
  35. ctx.fill();
  37. ctx.beginPath();
  38. ctx.arc(150, 35, 50, 0, 1.8 * Math.PI);
  39. ctx.setStrokeStyle('#666666');
  40. ctx.stroke();
  42. 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 坐标。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  3. ctx.beginPath();
  4. ctx.arc(30, 30, 2, 0, 2 * Math.PI);
  5. ctx.setFillStyle('red');
  6. ctx.fill();
  8. ctx.beginPath();
  9. ctx.arc(250, 25, 2, 0, 2 * Math.PI);
  10. ctx.setFillStyle('blue');
  11. ctx.fill();
  13. ctx.beginPath();
  14. ctx.arc(20, 100, 2, 0, 2 * Math.PI);
  15. ctx.arc(200, 100, 2, 0, 2 * Math.PI);
  16. ctx.setFillStyle('green');
  17. ctx.fill();
  19. ctx.setFillStyle('yellow');
  20. ctx.setFontSize(14);
  22. ctx.beginPath();
  23. ctx.moveTo(30, 30);
  24. ctx.lineTo(30, 100);
  25. ctx.lineTo(150, 75);
  27. ctx.moveTo(250, 30);
  28. ctx.lineTo(250, 80);
  29. ctx.lineTo(70, 75);
  30. ctx.setStrokeStyle('#EEEEEE');
  31. ctx.stroke();
  33. ctx.beginPath();
  34. ctx.moveTo(30, 30);
  35. ctx.bezierCurveTo(30, 150, 250, 150, 180, 20);
  36. ctx.setStrokeStyle('black');
  37. ctx.stroke();
  39. ctx.draw();

针对 moveTo(30, 30)，bezierCurveTo(30, 150, 250, 150, 180, 20) 的三个关键坐标如下：

  • 红色：起始点（20, 20）
  • 蓝色：两个控制点（20, 150），（250, 150）
  • 绿色：终止点（180, 20）

clip

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

代码示例

  1. //.js
  2. const ctx = my.createCanvasContext('awesomeCanvas')
  3. my.downloadFile({
  4.   url: 'https://gw.alipayobjects.com/zos/skylark-tools/public/files/dda114e320567e1d304790287d75a029.png',
  5.   success: function(res) {
  6.     ctx.save()
  7.     ctx.beginPath()
  8.     ctx.arc(50, 50, 25, 0, 2*Math.PI)
  9.     ctx.clip()
  10.     ctx.drawImage(res.tempFilePath, 25, 25)
  11.     ctx.restore()
  12.     ctx.draw()
  13.   }
  14. })

quadraticCurveTo

创建二次贝塞尔曲线路径。

说明：曲线的起始点为路径中前一个点。

入参

参数 类型 说明
cpx Number 贝塞尔控制点 X 坐标。
cpy Number 贝塞尔控制点 Y 坐标。
x Number 结束点 X 坐标。
y Number 结束点 Y 坐标。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  3. ctx.beginPath();
  4. ctx.arc(30, 30, 2, 0, 2 * Math.PI);
  5. ctx.setFillStyle('red');
  6. ctx.fill();
  8. ctx.beginPath();
  9. ctx.arc(250, 20, 2, 0, 2 * Math.PI);
  10. ctx.setFillStyle('blue');
  11. ctx.fill();
  13. ctx.beginPath();
  14. ctx.arc(30, 200, 2, 0, 2 * Math.PI);
  15. ctx.setFillStyle('green');
  16. ctx.fill();
  18. ctx.setFillStyle('black');
  19. ctx.setFontSize(12);
  21. ctx.beginPath();
  22. ctx.moveTo(30, 30);
  23. ctx.lineTo(30, 150);
  24. ctx.lineTo(250, 30);
  25. ctx.setStrokeStyle('#AAAAAA');
  26. ctx.stroke();
  28. ctx.beginPath();
  29. ctx.moveTo(30, 30);
  30. ctx.quadraticCurveTo(30, 150, 250, 25);
  31. ctx.setStrokeStyle('black');
  32. ctx.stroke();
  34. 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%）。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  3. ctx.strokeRect(15, 15, 30, 25);
  4. ctx.scale(3, 3);
  5. ctx.strokeRect(15, 15, 30, 25);
  6. ctx.scale(3, 3);
  7. ctx.strokeRect(15, 15, 30, 25);
  9. ctx.draw();

rotate

以原点为中心，原点可以用 translate 方法修改。顺时针旋转当前坐标轴。多次调用 rotate，旋转的角度会叠加。

入参

参数 类型 说明
rotate Number 旋转角度，以弧度计（degrees * Math.PI/180；degrees 范围为 0~360）。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  3. ctx.strokeRect(200, 20, 180, 150);
  4. ctx.rotate(30 * Math.PI / 180);
  5. ctx.strokeRect(200, 20, 180, 150);
  6. ctx.rotate(30 * Math.PI / 180);
  7. ctx.strokeRect(200, 20, 180, 150);
  9. ctx.draw();

translate

对当前坐标系的原点（0, 0）进行变换，默认的坐标系原点为页面左上角。

入参

参数 类型 说明
x Number 水平坐标平移量。
y Number 竖直坐标平移量。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  3. ctx.strokeRect(20, 20, 250, 80);
  4. ctx.translate(30, 30);
  5. ctx.strokeRect(20, 20, 250, 80);
  6. ctx.translate(30, 30);
  7. ctx.strokeRect(20, 20, 250, 80);
  9. ctx.draw();

setFontSize

设置字体大小。

入参

参数 类型 说明
fontSize Number 字号。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas')；
  3. ctx.setFontSize(14)；
  4. ctx.fillText('14', 20, 20)；；；
  5. ctx.setFontSize(22)
  6. ctx.fillText('22', 40, 40)
  7. ctx.setFontSize(30)；
  8. ctx.fillText('30', 60, 60)；
  9. ctx.setFontSize(38)；
  10. ctx.fillText('38', 90, 90)；
  12. ctx.draw()；

fillText

在画布上绘制被填充的文本。

入参

参数 类型 说明
text String 文本
x Number 绘制文本的左上角 X 坐标。
y Number 绘制文本的左上角 Y 坐标。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas')；
  3. ctx.setFontSize(42)
  4. ctx.fillText('Hello', 30, 30)；；
  5. ctx.fillText('alipay', 200, 200)
  7. ctx.draw()；

drawImage

绘制图像，图像保持原始尺寸。

入参

参数 类型 说明
imageResource String 图片资源，只支持线上 CDN 地址或小程序包地址，线上 CDN 需返回头 Access-Control-Allow-Origin: *。
x Number 图像左上角 X 坐标。
y Number 图像左上角 Y 坐标。
width Number 图像宽度。
height Number 图像高度。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas')；
  2. ctx.drawImage('https://img.alicdn.com/tfs/TB1GvVMj2BNTKJjy0FdXXcPpVXa-520-280.jpg', 2, 2, 250, 80)；
  3. ctx.draw()；

setGlobalAlpha

设置全局画笔透明度。

入参

参数 类型 取值范围 说明
alpha Number 0 或 1 透明度，0 表示完全透明；1 表示不透明。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas')；
  3. ctx.setFillStyle('yellow')；
  4. ctx.fillRect(10, 10, 150, 100)；
  5. ctx.setGlobalAlpha(0.2)；
  6. ctx.setFillStyle('blue')；
  7. ctx.fillRect(50, 50, 150, 100)；
  8. ctx.setFillStyle('red')；
  9. ctx.fillRect(100, 100, 150, 100)；
  11. ctx.draw();

setLineDash

设置虚线的样式。

入参

参数 类型 说明
segments Array<number> 一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如，[5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas')；
  3. ctx.setLineDash([5, 15, 25]);
  4. ctx.beginPath();
  5. ctx.moveTo(0,100);
  6. ctx.lineTo(400, 100);
  7. ctx.stroke();
  9. ctx.draw();

transform

使用矩阵多次叠加当前变换的方法，矩阵由方法的参数进行描述。你可以缩放、旋转、移动和倾斜上下文。

入参

参数 类型 说明
scaleX Number 水平缩放。
skewX Number 水平倾斜。
skewY Number 垂直倾斜。
scaleY Number 垂直缩放。
translateX Number 水平移动。
translateY Number 垂直移动。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas')；
  3. ctx.rotate(45 * Math.PI / 180);
  4. ctx.setFillStyle('red');
  5. ctx.fillRect(70,0,100,30);
  7. ctx.transform(1, 1, 0, 1, 0, 0);
  8. ctx.setFillStyle('#000');
  9. ctx.fillRect(0, 0, 100, 100);
  11. ctx.draw();

setTransform

使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。

入参

参数 类型 说明
scaleX Number 水平缩放。
skewX Number 水平倾斜。
skewY Number 垂直倾斜。
scaleY Number 垂直缩放。
translateX Number 水平移动。
translateY Number 垂直移动。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas')；
  3. ctx.rotate(45 * Math.PI / 180);
  4. ctx.setFillStyle('red');
  5. ctx.fillRect(70,0,100,30);
  7. ctx.setTransform(1, 1, 0, 1, 0, 0);
  8. ctx.setFillStyle('#000');
  9. ctx.fillRect(0, 0, 100, 100);
  11. ctx.draw();

getImageData

获取画布区域隐含的像素数据。

说明：基础库最低版本要求为 1.10。

入参

入参 类型 必填 说明
x Number 是 将要被提取的图像数据矩形区域的左上角横坐标。
y Number 是 将要被提取的图像数据矩形区域的左上角纵坐标。
width Number 是 将要被提取的图像数据矩形区域的宽度。
height Number 是 将要被提取的图像数据矩形区域的高度。
success Function 否 成功回调。
fail Function 否 失败回调。
complete Function 否 完成回调。

success 回调

参数

属性 类型 说明
width Number 图像数据矩形区域的宽度。
height Number 图像数据矩形区域的高度。

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas')；
  3. ctx.getImageData({
  4.   x: 0,
  5.   y: 0,
  6.   width: 100,
  7.   height: 100,
  8.   success(res) {
  9.     console.log(res.width) // 100
  10.     console.log(res.height) // 100
  11.     console.log(res.data instanceof Uint8ClampedArray) // true
  12.     console.log(res.data.length) // 100 * 100 * 4
  13.   }
  14. })

putImageData

将像素数据绘制到画布。

说明：基础库最低版本要求为 1.11。

入参

参数 类型 必填 说明
data Uint8ClampedArray 是 图像像素点数据，一维数组，每四项表示一个像素点的 rgba。
x Number 是 源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）。
y Number 是 源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）。
width Number 是 源图像数据矩形区域的宽度。
height Number 是 源图像数据矩形区域的高度。
success Function 否 成功回调。
fail Function 否 失败回调。
complete Function 否 完成回调。

代码示例

  1. const data = new Uint8ClampedArray([255, 0, 0, 1])
  2. const ctx = my.createCanvasContext('awesomeCanvas')；
  4. ctx.putImageData({
  5.     x: 0,
  6.     y: 0,
  7.     width: 1,
  8.     height: 1,
  9.     data: data,
  10.     success(res) {}
  11. })

save

保存当前的绘图上下文。

代码示例

  1. //.js
  2. const ctx = my.createCanvasContext('myCanvas')
  3. // save the default fill style
  4. ctx.save()
  5. ctx.setFillStyle('red')
  6. ctx.fillRect(10, 10, 150, 100)
  7. // restore to the previous saved state
  8. ctx.restore()
  9. ctx.fillRect(50, 50, 150, 100)
  10. ctx.draw()

restore

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

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  3. ctx.save();
  4. ctx.setFillStyle('red');
  5. ctx.fillRect(20, 20, 250, 80);
  7. ctx.restore();
  8. ctx.fillRect(60, 60, 155, 130);
  10. ctx.draw();

draw

将之前在绘图上下文中的描述（路径、变形、样式）画到画布中。

绘图上下文需要由 my.createCanvasContext(canvasId) 来创建。

入参

参数 类型 说明 基础库最低版本
reserve Boolean 非必填。本次绘制是否接着上一次绘制，即 reserve 参数为 false 时，则在本次调用 drawCanvas 绘制之前，native 层应先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认为 false。 -
callback Function 必填项。绘制完成后执行的回调函数。 1.10

代码示例

  • 代码示例 1
    1. const ctx = my.createCanvasContext('awesomeCanvas');
    2. ctx.setFillStyle('blue');
    3. ctx.fillRect(20, 20, 180, 80);
    4. ctx.draw();
    5. ctx.fillRect(60, 60, 250, 120);
    6. // 保留上一次的绘制结果
    7. ctx.draw(true);
  • 代码示例 2
    1. //.js
    2. const ctx = my.createCanvasContext('awesomeCanvas')
    3. ctx.setFillStyle('blue')
    4. ctx.fillRect(20, 20, 180, 80)
    5. ctx.draw()
    6. ctx.fillRect(60, 60, 250, 120)
    7. // 不保留上一次的绘制结果
    8. ctx.draw(false)
首页 移动开发平台 mPaaS 小程序 小程序开发 小程序 API 界面 画布