支付宝小程序API 画布·canvas

my.createCanvasContext

简介

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

扫码体验

画布.jpeg

入参

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

返回值

返回值为 CanvasContext。

CanvasContext 概览

名称	描述
CanvasContext.addColorStop	创建一个圆形的渐变色。
CanvasContext.arc	画一条弧线。
CanvasContext.beginPath	开始创建一个路径，需要调用 `fill` 或者 `stroke` 才会使用路径进行填充或描边。
CanvasContext.bezierCurveTo	创建三次方贝塞尔曲线路径。
CanvasContext.clearRect	清除画布上在该矩形区域内的内容。
CanvasContext.clip	将当前创建的路径设置为当前剪切路径。
CanvasContext.closePath	关闭一个路径。
CanvasContext.createCircularGradient	创建一个圆形的渐变色。起点在圆心，终点在圆环。
CanvasContext.createLinearGradient	创建一个线性的渐变色。
CanvasContext.draw	将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
CanvasContext.drawImage	绘制图像，图像保持原始尺寸。
CanvasContext.fill	对当前路径中的内容进行填充。
CanvasContext.fillRect	填充矩形。
CanvasContext.fillText	在画布上绘制被填充的文本。
CanvasContext.getImageData	获取 canvas 区域隐含的像素数据。
CanvasContext.lineTo	增加一个新点，然后创建一条从上次指定点到目标点的线。
CanvasContext.measureText	测量文本尺寸信息，目前仅返回文本宽度。同步接口。
CanvasContext.moveTo	把路径移动到画布中的指定点，不创建线条。
CanvasContext.putImageData	将像素数据绘制到画布。
CanvasContext.quadraticCurveTo	创建二次贝塞尔曲线路径。
CanvasContext.rect	创建二次贝塞尔曲线路径。
CanvasContext.restore	恢复之前保存的绘图上下文。
CanvasContext.rotate	以原点为中心，原点可以用 translate 方法修改。顺时针旋转当前坐标轴。多次调用`rotate`，旋转的角度会叠加。
CanvasContext.save	保存当前的绘图上下文。
CanvasContext.scale	在调用`scale`方法后，之后创建的路径其横纵坐标会被缩放。多次调用`scale`，倍数会相乘。
CanvasContext.setFillStyle	设置填充色。
CanvasContext.setFontSize	设置字体大小。
CanvasContext.setGlobalAlpha	设置全局画笔透明度。
CanvasContext.setLineCap	设置线条的端点样式。
CanvasContext.setLineDash	设置虚线的样式。
CanvasContext.setLineJoin	设置线条的交点样式。
CanvasContext.setLineWidth	设置线条的宽度。
CanvasContext.setMiterLimit	设置最大斜接长度。
CanvasContext.setShadow	设置阴影样式。
CanvasContext.setStrokeStyle	设置边框颜色。
CanvasContext.setTextAlign	Canvas 2D API 描述绘制文本时，文本的对齐方式的属性。
CanvasContext.setTextBaseline	Canvas 2D API 描述绘制文本时，当前文本基线的属性。
CanvasContext.setTransform	使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。
CanvasContext.stroke	画出当前路径的边框。默认 `black`。
CanvasContext.strokeRect	画一个矩形（非填充）。
CanvasContext.toDataURL	获取画布指定区域的 data URL数据。
CanvasContext.toTempFilePath	把当前画布的内容导出生成图片，并返回文件路径。
CanvasContext.transform	使用矩阵多次叠加当前变换的方法，矩阵由方法的参数进行描述。可以缩放、旋转、移动和倾斜上下文。
CanvasContext.translate	对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角。