wx.createContext()
创建并返回绘图上下文context对象。
context
context只是一个记录方法调用的容器&＃xff0c;用于生成记录绘制行为的actions数组。context跟不存在对应关系&＃xff0c;一个context生成画布的绘制动作数组可以应用于多个。// 假设页面上有3个画布
var canvas1Id &＃61; 3001;
var canvas2Id &＃61; 3002;
var canvas3Id &＃61; 3003;
var context &＃61; wx.createContext();
[canvas1Id, canvas2Id, canvas3Id].forEach(function(id){
context.clearActions();
// 在context上调用方法
wx.drawCanvas({
canvasId: id,
actions: context.getActions();
});
});
context对象的方法列表&＃xff1a;方法 参数 说明getActions 无 获取当前context上存储的绘图动作
clearActions 无 清空当前的存储绘图动作
变形
对横纵坐标进行缩放
对坐标轴进行顺时针旋转
对坐标原点进行缩放
save 无 保存当前坐标轴的缩放、旋转、平移信息
restore 无 恢复之前保存过的坐标轴的缩放、旋转、平移信息
绘制
在给定的矩形区域内&＃xff0c;清除画布上的像素
在画布上绘制被填充的文本
fill 无 对当前路径进行填充
stroke 无 对当前路径进行描边
路径
把路径移动到画布中的指定点&＃xff0c;但不创建线条。
添加一个新点&＃xff0c;然后在画布中创建从该点到最后指定点的线条。
添加一个矩形路径到当前路径。
添加一个弧形路径到当前路径&＃xff0c;顺时针绘制。
样式
方法详解&＃xff1a;
scale
在调用scale()方法后&＃xff0c;之后创建的路径其横纵坐标会被缩放。多次调用scale&＃xff0c;倍数会相乘。参数 类型 范围 说明scaleWidth Number 1&＃61;100%&＃xff0c;0.5&＃61;50%&＃xff0c;2&＃61;200%&＃xff0c;依次类推 横坐标缩放的倍数
scaleHeight Number 1&＃61;100%&＃xff0c;0.5&＃61;50%&＃xff0c;2&＃61;200%&＃xff0c;依次类推 纵坐标轴缩放的倍数
示例代码&＃xff1a;下载
//scale.js
Page({
onReady:function(e){
var context &＃61; wx.createContext();
context.rect(5,5,25,15)
context.stroke();
context.scale(2,2); //再放大2倍
context.rect(5,5,25,15);
context.stroke();
context.scale(2,2); //再放大2倍
context.rect(5,5,25,15)
context.stroke();
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
![]()
rotate
以原点为中心&＃xff0c;原点可以用translate方法修改。顺时针旋转当前坐标轴。多次调用rotate&＃xff0c;旋转的角度会叠加。参数 类型 范围 说明rotate Number degrees * Math.PI/180&＃xff1b;degrees范围为0~360 旋转角度&＃xff0c;以弧度计
示例代码&＃xff1a;下载//rotate.js
Page({
onReady:function(e){
var context &＃61; wx.createContext();
context.rect(50,50,200,200)
context.stroke();
context.rotate(5*Math.PI/180)
context.rect(50,50,200,200)
context.stroke();
context.rotate(5*Math.PI/180)
context.rect(50,50,200,200)
context.stroke()
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
![]()
translate
对当前坐标系的原点(0, 0)进行变换&＃xff0c;默认的坐标系原点为页面左上角。参数 类型 范围 说明x Number 水平坐标平移量
y Number 竖直坐标平移量
示例代码&＃xff1a;下载//translate.js
Page({
onReady:function(){
var context &＃61; wx.createContext();
context.rect(50,50,200,200)
context.stroke()
context.translate(50,50)
context.rect(50,50,200,200)
context.stroke();
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
![]()
clearRect
清除画布上在该矩形区域内的内容参数 类型 范围 说明x Number 矩形区域左上角的x坐标
y Number 矩形区域左上角的y坐标
width Number 矩形区域的宽度
height Number 矩形区域的高度
示例代码&＃xff1a;下载//clearrect.js
Page({
onReady:function(){
var context &＃61; wx.createContext();
context.rect(50,50,200,200)
context.fill()
context.clearRect(100,100,50,50)
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
![]()
drawImage
绘制图像&＃xff0c;图像保持原始尺寸。参数 类型 范围 说明imageResource String 通过chooseImage得到一个文件路径或者一个项目目录内的图片 所要绘制的图片资源
x Number 图像左上角的x坐标
y Number 图像左上角的y坐标
示例&＃xff1a;下载//drawimage.js
Page({
onReady:function(e){
var context &＃61; wx.createContext();
wx.chooseImage({
success:function(res){
context.drawImage(res.tempFilePaths[0],0,0)
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
}
})
![]()
fillText
在画布上绘制被填充的文本。参数 类型 范围 说明text String 在画布上输出的文本
x Number 绘制文本的左上角x坐标位置
y Number 绘制文本的左上角y坐标位置
示例代码&＃xff1a;下载//filltext.js
Page({
onReady:function(){
var context &＃61; wx.createContext();
context.setFontSize(14)
context.fillText("MINA",50,50)
context.moveTo(0,50)
context.lineTo(100,50)
context.stroke();
context.setFontSize(20)
context.fillText("MINA",100,100)
context.moveTo(0,100)
context.lineTo(200,100)
context.stroke();
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
![]()
beginPath
开始创建一个路径&＃xff0c;需要调用fill或者stroke才会使用路径进行填充或描边。同一个路径内的多次setFillStyle、setStrokeStyle、setLineWidth等设置&＃xff0c;以最后一次设置为准。
closePage
关闭一个路径。
moveTo
把路径移动到画布中的指定点&＃xff0c;不创建线条。参数 类型 范围 说明x Number 目标位置的x坐标
y Number 目标位置的y坐标
lineTo
在当前位置添加一个新点&＃xff0c;然后在画布中创建从该点到最后指定点的路径。参数 类型 范围 说明x Number 目标位置的x坐标
y Number 目标位置的y坐标
rect
添加一个矩形路径到当前路径。参数 类型 范围 说明x Number 矩形路径左上角的x坐标
y Number 矩形路径左上角的y坐标
width Number 矩形路径的宽度
height Number 矩形路径的高度
arc
添加一个弧形路径到当前路径&＃xff0c;顺时针绘制。参数 类型 范围 说明x Number 矩形路径左上角的x坐标
y Number 矩形路径左上角的y坐标
radius Number 矩形路径的宽度
startAngle Number 弧度, 0到2pi 起始弧度
sweepAngle Number 弧度, 0到2pi 从起始弧度开始&＃xff0c;扫过的弧度
quadraticCurveTo
创建二次贝塞尔曲线路径。参数 类型 范围 说明cpx Number 贝塞尔控制点的x坐标
cpy Number 贝塞尔控制点的y坐标
x Number 结束点的x坐标
y Number 结束点的y坐标
bezierCurveTo
创建三次方贝塞尔曲线路径。参数 类型 范围 说明cp1x Number 第一个贝塞尔控制点的 x 坐标
cp1y Number 第一个贝塞尔控制点的 y 坐标
cp2x Number 第二个贝塞尔控制点的 x 坐标
cp2y Number 第二个贝塞尔控制点的 y 坐标
x Number 结束点的 x 坐标
y Number 结束点的 y 坐标
setFillStyle
设置纯色填充。
设置颜色为填充样式参数 类型 范围 说明color String &＃39;rgb(255, 0, 0)&＃39;或&＃39;rgba(255, 0, 0, 0.6)&＃39;或&＃39;#ff0000&＃39;格式的颜色字符串 设置为填充样式的颜色
setStrokeStyle
设置纯色描边&＃xff0c;参数同setFillStyle。
示例代码&＃xff1a;下载//setfillstyle.js
Page({
onReady:function(e){
var context &＃61; wx.createContext();
context.setFillStyle("#ff00ff");
context.setStrokeStyle("#00ffff");
context.rect(50,50,100,100)
context.fill()
context.stroke()
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
![]()
setShadow
设置阴影样式。参数 类型 范围 说明offsetX Number 阴影相对于形状在水平方向的偏移
offsetY Number 阴影相对于形状在竖直方向的偏移
blur Number 0~100 阴影的模糊级别&＃xff0c;数值越大越模糊
color Color &＃39;rgb(255, 0, 0)&＃39;或&＃39;rgba(255, 0, 0, 0.6)&＃39;或&＃39;#ff0000&＃39;格式的颜色字符串 阴影的颜色
setFontSize
设置字体的字号。参数 类型 范围 说明fontSize Number 字体的字号
setLineWidth
设置线条的宽度。参数 类型 范围 说明lineWidth Number 线条的宽度
setLineCap
设置线条的结束端点样式。参数 类型 范围 说明lineCap String &＃39;butt&＃39;、&＃39;round&＃39;、&＃39;square&＃39; 线条的结束端点样式
setLineJoin
设置两条线相交时&＃xff0c;所创建的拐角类型。参数 类型 范围 说明lineJoin String &＃39;bevel&＃39;、&＃39;round&＃39;、&＃39;miter&＃39; 两条线相交时&＃xff0c;所创建的拐角类型
setMiterLimit
设置最大斜接长度&＃xff0c;斜接长度指的是在两条线交汇处内角和外角之间的距离。 当setLineJoin为&＃39;miter&＃39;时才有效。超过最大倾斜长度的&＃xff0c;连接处将以lineJoin为bevel来显示参数 类型 范围 说明miterLimit Number 最大斜接长度
示例代码&＃xff1a;下载//line.js
Page({
onReady:function(e){
var context &＃61; wx.createContext();
context.setLineWidth(10);
context.setLineCap("round")
context.setLineJoin("miter");
context.setMiterLimit(10);
context.moveTo(20,20);
context.lineTo(150,27);
context.lineTo(20,54);
context.stroke();
context.beginPath();
context.setMiterLimit(3);
context.moveTo(20,70);
context.lineTo(150,77);
context.lineTo(20,104);
context.stroke();
wx.drawCanvas({
canvasId:1,
actions:context.getActions()
});
}
})
![]()
wx.drawCanvas(OBJECT)
OBJECT参数说明&＃xff1a;参数 类型 必填 说明canvasId String 是 画布标识&＃xff0c;传入的cavas-id
actions Array 是 绘图动作数组&＃xff0c;由wx.createContext创建的context&＃xff0c;调用getActions方法导出绘图动作数组。
示例&＃xff1a;下载
// index.js
Page({
canvasIdErrorCallback: function(e){
console.error(e.detail.errMsg);
},
onReady: function(e){
//使用wx.createContext获取绘图上下文context
var context &＃61; wx.createContext();
context.setStrokeStyle("#00ff00");
context.setLineWidth(5);
context.rect(0,0,200,200);
context.stroke()
context.setStrokeStyle ("#ff0000") ;
context.setLineWidth (2)
context.moveTo(160,100)
context.arc(100,100,60,0,2*Math.PI,true);
context.moveTo(140,100);
context.arc(100,100,40,0,Math.PI,false);
context.moveTo(85,80);
context.arc(80,80,5,0,2*Math.PI,true);
context.moveTo(125,80);
context.arc(120,80,5,0,2*Math.PI,true);
context.stroke();
//调用wx.drawCanvas&＃xff0c;通过canvasId指定在哪张画布上绘制&＃xff0c;通过actions指定绘制行为
wx.drawCanvas({
canvasId: &＃39;firstCanvas&＃39;,
actions: context.getActions() //获取绘图动作数组
});
}
});
京公网安备 11010802041100号