全部产品
云市场
云游戏

画布

更新时间:2020-07-07 19:42:10

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 目标文件的类型。合法值为 jpgpng,默认值为 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 枚举值:leftrightcenterstartend

代码示例

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

setTextBaseline

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

入参

参数 类型 定义
textBaseline String 枚举值:tophangingmiddlealphabeticideographicbottom

代码示例

  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');
  2. const grd = ctx.createLinearGradient(10, 10, 150, 10);
  3. grd.addColorStop(0, 'yellow');
  4. grd.addColorStop(1, 'blue');
  5. ctx.setFillStyle(grd);
  6. ctx.fillRect(20, 20, 250, 180);
  7. ctx.draw();

createCircularGradient

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

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

入参

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

代码示例

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

addColorStop

创建一个颜色的渐变点。

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

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

入参

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

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. const grd = ctx.createLinearGradient(40, 20, 230, 40);
  3. grd.addColorStop(0.36, 'orange');
  4. grd.addColorStop(0.56, 'cyan');
  5. grd.addColorStop(0.63, 'yellow');
  6. grd.addColorStop(0.76, 'blue');
  7. grd.addColorStop(0.54, 'green');
  8. grd.addColorStop(1, 'purple');
  9. grd.addColorStop(0.4, 'red');
  10. ctx.setFillStyle(grd);
  11. ctx.fillRect(20, 20, 250, 180);
  12. 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();
  6. ctx.beginPath();
  7. ctx.setLineWidth(10);
  8. ctx.moveTo(20, 35);
  9. ctx.lineTo(250, 30);
  10. ctx.stroke();
  11. ctx.beginPath();
  12. ctx.setLineWidth(20);
  13. ctx.moveTo(20, 50);
  14. ctx.lineTo(250, 55);
  15. ctx.stroke();
  16. ctx.beginPath();
  17. ctx.setLineWidth(25);
  18. ctx.moveTo(20, 80);
  19. ctx.lineTo(250, 85);
  20. ctx.stroke();
  21. ctx.draw();

setLineCap

设置线条的端点样式。

入参

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

代码示例

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

setLineJoin

设置线条的交点样式。

入参

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

代码示例

  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();
  7. ctx.beginPath();
  8. ctx.setLineJoin('round');
  9. ctx.setLineWidth(20);
  10. ctx.moveTo(100, 20);
  11. ctx.lineTo(280, 80);
  12. ctx.lineTo(100, 100);
  13. ctx.stroke();
  14. ctx.beginPath();
  15. ctx.setLineJoin('bevel');
  16. ctx.setLineWidth(20);
  17. ctx.moveTo(60, 25);
  18. ctx.lineTo(180, 80);
  19. ctx.lineTo(90, 100);
  20. ctx.stroke();
  21. ctx.beginPath();
  22. ctx.setLineJoin('miter');
  23. ctx.setLineWidth(15);
  24. ctx.moveTo(130, 70);
  25. ctx.lineTo(250, 50);
  26. ctx.lineTo(230, 100);
  27. ctx.stroke();
  28. ctx.draw();

setMiterLimit

设置最大斜接长度。

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

入参

参数 类型 说明
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();
  10. ctx.beginPath();
  11. ctx.setLineWidth(15);
  12. ctx.setLineJoin('miter');
  13. ctx.setMiterLimit(2);
  14. ctx.moveTo(50, 10);
  15. ctx.lineTo(140, 50);
  16. ctx.lineTo(50, 90);
  17. ctx.stroke();
  18. ctx.beginPath();
  19. ctx.setLineWidth(15);
  20. ctx.setLineJoin('miter');
  21. ctx.setMiterLimit(3);
  22. ctx.moveTo(90, 10);
  23. ctx.lineTo(180, 50);
  24. ctx.lineTo(90, 90);
  25. ctx.stroke();
  26. 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');
  2. ctx.rect(20, 20, 150, 50);
  3. ctx.setFillStyle('blue');
  4. ctx.fill();
  5. ctx.beginPath();
  6. ctx.rect(20, 50, 150, 40);
  7. ctx.setFillStyle('yellow');
  8. ctx.fillRect(20, 170, 150, 40);
  9. ctx.rect(10, 100, 100, 30);
  10. ctx.setFillStyle('red');
  11. ctx.fill();
  12. 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);
  4. ctx.moveTo(20, 55);
  5. ctx.lineTo(120, 60);
  6. ctx.stroke();
  7. 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');
  2. ctx.arc(200, 75, 50, 0, 2 * Math.PI);
  3. ctx.setFillStyle('#CCCCCC');
  4. ctx.fill();
  5. ctx.beginPath();
  6. ctx.moveTo(50, 65);
  7. ctx.lineTo(170, 80);
  8. ctx.moveTo(200, 35);
  9. ctx.lineTo(200, 235);
  10. ctx.setStrokeStyle('#AAAAAA');
  11. ctx.stroke();
  12. ctx.setFontSize(12);
  13. ctx.setFillStyle('yellow');
  14. ctx.fillText('0', 165, 78);
  15. ctx.fillText('0.6*PI', 96, 148);
  16. ctx.fillText('1*PI', 15, 57);
  17. ctx.fillText('1.7*PI', 94, 20);
  18. ctx.beginPath();
  19. ctx.arc(200, 85, 2, 0, 2 * Math.PI);
  20. ctx.setFillStyle('blue');
  21. ctx.fill();
  22. ctx.beginPath();
  23. ctx.arc(200, 35, 2, 0, 2 * Math.PI);
  24. ctx.setFillStyle('green');
  25. ctx.fill();
  26. ctx.beginPath();
  27. ctx.arc(450, 60, 2, 0, 2 * Math.PI);
  28. ctx.setFillStyle('red');
  29. ctx.fill();
  30. ctx.beginPath();
  31. ctx.arc(150, 35, 50, 0, 1.8 * Math.PI);
  32. ctx.setStrokeStyle('#666666');
  33. ctx.stroke();
  34. 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');
  2. ctx.beginPath();
  3. ctx.arc(30, 30, 2, 0, 2 * Math.PI);
  4. ctx.setFillStyle('red');
  5. ctx.fill();
  6. ctx.beginPath();
  7. ctx.arc(250, 25, 2, 0, 2 * Math.PI);
  8. ctx.setFillStyle('blue');
  9. ctx.fill();
  10. ctx.beginPath();
  11. ctx.arc(20, 100, 2, 0, 2 * Math.PI);
  12. ctx.arc(200, 100, 2, 0, 2 * Math.PI);
  13. ctx.setFillStyle('green');
  14. ctx.fill();
  15. ctx.setFillStyle('yellow');
  16. ctx.setFontSize(14);
  17. ctx.beginPath();
  18. ctx.moveTo(30, 30);
  19. ctx.lineTo(30, 100);
  20. ctx.lineTo(150, 75);
  21. ctx.moveTo(250, 30);
  22. ctx.lineTo(250, 80);
  23. ctx.lineTo(70, 75);
  24. ctx.setStrokeStyle('#EEEEEE');
  25. ctx.stroke();
  26. ctx.beginPath();
  27. ctx.moveTo(30, 30);
  28. ctx.bezierCurveTo(30, 150, 250, 150, 180, 20);
  29. ctx.setStrokeStyle('black');
  30. ctx.stroke();
  31. 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');
  2. ctx.beginPath();
  3. ctx.arc(30, 30, 2, 0, 2 * Math.PI);
  4. ctx.setFillStyle('red');
  5. ctx.fill();
  6. ctx.beginPath();
  7. ctx.arc(250, 20, 2, 0, 2 * Math.PI);
  8. ctx.setFillStyle('blue');
  9. ctx.fill();
  10. ctx.beginPath();
  11. ctx.arc(30, 200, 2, 0, 2 * Math.PI);
  12. ctx.setFillStyle('green');
  13. ctx.fill();
  14. ctx.setFillStyle('black');
  15. ctx.setFontSize(12);
  16. ctx.beginPath();
  17. ctx.moveTo(30, 30);
  18. ctx.lineTo(30, 150);
  19. ctx.lineTo(250, 30);
  20. ctx.setStrokeStyle('#AAAAAA');
  21. ctx.stroke();
  22. ctx.beginPath();
  23. ctx.moveTo(30, 30);
  24. ctx.quadraticCurveTo(30, 150, 250, 25);
  25. ctx.setStrokeStyle('black');
  26. ctx.stroke();
  27. 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');
  2. ctx.strokeRect(15, 15, 30, 25);
  3. ctx.scale(3, 3);
  4. ctx.strokeRect(15, 15, 30, 25);
  5. ctx.scale(3, 3);
  6. ctx.strokeRect(15, 15, 30, 25);
  7. ctx.draw();

rotate

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

入参

参数 类型 说明
rotate Number 旋转角度,以弧度计(degrees * Math.PI/180;degrees 范围为 0~360)。

代码示例

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

translate

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

入参

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

代码示例

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

setFontSize

设置字体大小。

入参

参数 类型 说明
fontSize Number 字号。

代码示例

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

fillText

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

入参

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

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setFontSize(42)
  3. ctx.fillText('Hello', 30, 30);;
  4. ctx.fillText('alipay', 200, 200)
  5. 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');
  2. ctx.setFillStyle('yellow');
  3. ctx.fillRect(10, 10, 150, 100);
  4. ctx.setGlobalAlpha(0.2);
  5. ctx.setFillStyle('blue');
  6. ctx.fillRect(50, 50, 150, 100);
  7. ctx.setFillStyle('red');
  8. ctx.fillRect(100, 100, 150, 100);
  9. ctx.draw();

setLineDash

设置虚线的样式。

入参

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

代码示例

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

transform

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

入参

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

代码示例

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

setTransform

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

入参

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

代码示例

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.rotate(45 * Math.PI / 180);
  3. ctx.setFillStyle('red');
  4. ctx.fillRect(70,0,100,30);
  5. ctx.setTransform(1, 1, 0, 1, 0, 0);
  6. ctx.setFillStyle('#000');
  7. ctx.fillRect(0, 0, 100, 100);
  8. 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');
  2. ctx.getImageData({
  3. x: 0,
  4. y: 0,
  5. width: 100,
  6. height: 100,
  7. success(res) {
  8. console.log(res.width) // 100
  9. console.log(res.height) // 100
  10. console.log(res.data instanceof Uint8ClampedArray) // true
  11. console.log(res.data.length) // 100 * 100 * 4
  12. }
  13. })

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');
  3. ctx.putImageData({
  4. x: 0,
  5. y: 0,
  6. width: 1,
  7. height: 1,
  8. data: data,
  9. success(res) {}
  10. })

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');
  2. ctx.save();
  3. ctx.setFillStyle('red');
  4. ctx.fillRect(20, 20, 250, 80);
  5. ctx.restore();
  6. ctx.fillRect(60, 60, 155, 130);
  7. 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)