微信小程序API 绘图接口（reference）、方法大全
作者:
佩佩216 | 来源:发表于
2018-05-11 18:04 被阅读0次
API 接口
| 方法 |
说明 |
参数 |
类型 |
说明 |
| createCanvasContext |
创建 canvas 绘图上下文(指定 canvasId) |
canvasId |
String |
画布表示，传入定义在<canvas/>的 canvas-id |
|
createContext(不推荐使用) |
创建 canvas 绘图上下文 |
|
|
|
|
drawCanvas(不推荐使用) |
进行绘图 |
canvasId,actions,reserve |
String,Array,Boolean |
1.画布标识，传入<canvas/>的 cavas-id;2.绘图动作数组，由 wx.createContext 创建的 context，调用 getActions 方法导出绘图动作数组;3.(可选)本次绘制是否接着上一次绘制，即reserve参数为false，则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制；若reserver参数为true，则保留当前画布上的内容，本次调用drawCanvas绘制的内容覆盖在上面，默认 false |
| canvasToTempFilePath |
导出图片 |
x ,y,width,height,destWidth,destHeight,canvasId,fileType,fileType,success,fail,complete |
Number,String,Function |
1.canvasId是必填以外,其余非必填;2.dest为输出参数;3.目标文件的类型，只支持 'jpg' 或 'png'。默认为 'png';4.目标文件的类型，只支持 'jpg' 或 'png'。默认为 'png' |
context 对象的方法列表
颜色，样式，阴影
| 方法 |
说明 |
参数 |
类型 |
说明 |
| setFillStyle |
设置填充样式 |
color |
Color |
填充色 |
| setStrokeStyle |
设置线条样式 |
color |
Color |
填充色 |
| setShadow |
设置阴影 |
offsetX,offsetY,blur,color |
Number,Color |
阴影上下偏移量及颜色,blur取值0~100,表示阴影的模糊级别，数值越大越模糊 |
渐变
线条样式
| 方法 |
说明 |
参数 |
类型 |
说明 |
| setLineWidth |
设置线条宽度 |
lineWidth |
Number |
线条的宽度(单位px) |
| setLineCap |
设置线条端点的样式 |
lineCap |
String |
'butt'、'round'、'square' |
| setLineJoin |
设置两线相交处的样式 |
lineJoin |
String |
'bevel'、'round'、'miter' |
| setMiterLimit |
设置最大倾斜 |
miterLimit |
Number |
最大斜接长度 |
矩形
| 方法 |
说明 |
参数 |
类型 |
说明 |
| rect |
创建一个矩形 |
x,y,width,height |
Number |
起点坐标和宽高 |
| fillRect |
填充一个矩形 |
x,y,width,height |
Number |
起点坐标和宽高 |
| strokeRect |
画一个矩形（不填充） |
| clearRect |
在给定的矩形区域内，清除画布上的像素 |
x,y,width,height |
Number |
起点坐标和宽高 |
路径
| 方法 |
说明 |
参数 |
类型 |
说明 |
| fill |
对当前路径进行填充 |
|
|
|
| stroke |
对当前路径进行描边 |
|
|
|
| beginPath |
开始一个路径 |
|
|
|
| closePath |
关闭一个路径 |
|
|
|
| moveTo |
把路径移动到画布中的指定点，但不创建线条。 |
x,y |
Number |
目标位置坐标 |
| lineTo |
添加一个新点，然后在画布中创建从该点到最后指定点的线条。 |
x,y |
Number |
目标位置坐标 |
| arc |
添加一个弧形路径到当前路径，顺时针绘制。 |
x,y,r,sAngle,eAngle,counterclockwise |
Number,Boolean |
圆心坐标,起始终止弧度,顺时针或逆时针(可选) |
| quadraticCurveTo |
创建二次方贝塞尔曲线 |
cpx,cpy,x,y |
Number |
控制点及结束点坐标 |
| bezierCurveTo |
创建三次方贝塞尔曲线 |
cp1x,cp1y,cp2x,cp2y,x,y |
Number |
两个控制点及结束点坐标 |
变形
| 方法 |
说明 |
参数 |
类型 |
说明 |
| scale |
对横纵坐标进行缩放 |
scaleWidth,scaleHeight |
Number |
横纵坐标缩放比例 |
| rotate |
对坐标轴进行顺时针旋转 |
rotate |
Number |
旋转角度，以弧度计(degrees * Math.PI/180；degrees范围为0~360) |
| translate |
对坐标原点进行缩放 |
x,y |
Number |
水平及竖直方向平移量 |
文字
| 方法 |
说明 |
参数 |
类型 |
说明 |
| fillText |
在画布上绘制被填充的文本 |
text,x,y |
String,Number |
文本信息及文本所在位置坐标 |
| setFontSize |
设置字体大小 |
fontSize |
Number |
字体的字号 |
| setTextBaseline |
设置字体基准线 |
textBaseline |
textBaseline |
可选值 'top'、'bottom'、'middle'、'normal' |
| setTextAlign |
设置字体对齐方式 |
align |
String |
可选值 'left'、'center'、'right' |
图片
| 方法 |
说明 |
参数 |
类型 |
说明 |
| drawImage |
在画布上绘制图像 |
imageResource,x,y,width,height |
String,Number |
所要绘制的图片资源,图像左上角的坐标及图像的尺寸 |
混合
| 方法 |
说明 |
参数 |
类型 |
说明 |
| setGlobalAlpha |
设置全局画笔透明度 |
alpha |
0~1 |
透明度，0 表示完全透明，1 表示完全不透明 |
其他
| 方法 |
说明 |
参数 |
类型 |
说明 |
| save |
保存当前绘图上下文 |
|
|
|
| restore |
恢复之前保过的绘图上下文 |
|
|
|
| draw |
进行绘图 |
reserve,callback |
Boolean,Function |
非必填。本次绘制是否接着上一次绘制,绘制完成后回调 |
|
getActions(不推荐使用) |
获取当前context上存储的绘图动作 |
|
|
|
|
clearActions(不推荐使用) |
清空当前的存储绘图动作 |
|
|
|
本文标题：微信小程序API 绘图接口（reference）、方法大全
本文链接：https://www.haomeiwen.com/subject/uetqdftx.html
网友评论