我要评论本文实例为大家分享了微信小程序实现手指触摸画板的具体代码，供大家参考，具体内容如下
先看效果图：
wxml
<!--pages/shouxieban/shouxieban.wxml-->
<view class="container">
<view>手写板（请在下方区域手写内容）</view>
<canvas style="width: {{canvasw}}px; height: {{canvash}}px" class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasstart" bindtouchmove="canvasmove" bindtouchend="canvasend" touchcancel="canvasend" binderror="canvasiderrorcallback"></canvas>
<view class='btns canvaspd'>
<button bindtap="cleardraw">清除画板</button>
<button bindtap="setsign">确定</button>
</view>
<image src='{{canvasimgsrc}}'></image>
</view>
js
var context = null;// 使用 wx.createcontext 获取绘图上下文 context
var isbuttondown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态，标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度
// pages/shouxieban/shouxieban.js
page({
/**
* 页面的初始数据
*/
data: {
//canvas宽高
canvasw: 0,
canvash: 0,
//canvas生成的图片路径
canvasimgsrc: ""
},
//画布初始化执行
startcanvas: function () {
var that = this;
//创建canvas
this.initcanvas();
//获取系统信息
wx.getsysteminfo({
success: function (res) {
canvasw = res.windowwidth - 0;//设备宽度
canvash = canvasw;
that.setdata({ 'canvasw': canvasw });
that.setdata({ 'canvash': canvash });
}
});
},
//初始化函数
initcanvas: function () {
// 使用 wx.createcontext 获取绘图上下文 context
context = wx.createcanvascontext('canvas');
context.beginpath()
context.setstrokestyle('#000000');
context.setlinewidth(4);
context.setlinecap('round');
context.setlinejoin('round');
},
//事件监听
canvasiderrorcallback: function (e) {
console.error(e.detail.errmsg)
},
canvasstart: function (event) {
isbuttondown = true;
arrz.push(0);
arrx.push(event.changedtouches[0].x);
arry.push(event.changedtouches[0].y);
},
canvasmove: function (event) {
if (isbuttondown) {
arrz.push(1);
arrx.push(event.changedtouches[0].x);
arry.push(event.changedtouches[0].y);
};
for (var i = 0; i < arrx.length; i++) {
if (arrz[i] == 0) {
context.moveto(arrx[i], arry[i])
} else {
context.lineto(arrx[i], arry[i])
};
};
context.clearrect(0, 0, canvasw, canvash);
context.setstrokestyle('#000000');
context.setlinewidth(4);
context.setlinecap('round');
context.setlinejoin('round');
context.stroke();
context.draw(false);
},
canvasend: function (event) {
isbuttondown = false;
},
//清除画布
cleardraw: function () {
//清除画布
arrx = [];
arry = [];
arrz = [];
context.clearrect(0, 0, canvasw, canvash);
context.draw(true);
},
//提交签名内容
setsign: function () {
var that = this;
if (arrx.length == 0) {
wx.showmodal({
title: '提示',
content: '签名内容不能为空！',
showcancel: false
});
return false;
};
console.log("不是空的，canvas即将生成图片")
//生成图片
wx.canvastotempfilepath({
canvasid: 'canvas',
success: function (res) {
console.log("canvas可以生成图片")
console.log(res.tempfilepath, 'canvas图片地址');
that.setdata({ canvasimgsrc: res.tempfilepath })
//code 比如上传操作
},
fail: function () {
console.log("canvas不可以生成图片")
wx.showmodal({
title: '提示',
content: '微信当前版本不支持，请更新到最新版本！',
showcancel: false
});
},
complete: function () {
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onload: function (options) {
//画布初始化执行
this.startcanvas();
}
})
css
/* pages/shouxieban/shouxieban.wxss */
/*手写板 */
page{
background: #f6f6f6;
padding: 5px auto
}
canvas{
border: 1px solid #d0d0d0;
margin: 5rpx;
background: #f2f2f2
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论