在微信小程序中,同样支持canvas的使用。
1.首先在 wxml 页面中添加组件:
2.在小程序的 js 中初始化所需的变量如下:
// 初始化签名变量,放在 Page 前
var content = null;
var touchs = [];
//页面的data数据,在 Page 中
data: {
imgList:[],
signImage: ''
}
3.在小程序的 js 中 Page 内写入如下函数:
// 画布的触摸移动开始手势响应
start: function (event) {
// console.log("触摸开始" + event.changedTouches[0].x);
// console.log("触摸开始" + event.changedTouches[0].y);
//获取触摸开始的 x,y
let point = { x: event.changedTouches[0].x, y: event.changedTouches[0].y }
touchs.push(point);
},
// 画布的触摸移动手势响应
move: function (e) {
let point = { x: e.touches[0].x, y: e.touches[0].y }
touchs.push(point);
if (touchs.length >= 2) {
this.dra