First look at the renderings:
wxml
<!--pages/shouxieban/shouxieban.wxml-->
<view class="container">
<view>Handwriting pad (please write in the area below)</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">Clear artboard</button>
<button bindtap="setSign">确定</button>
</view>
<image src='{{canvasimgsrc}}'></image>
</view>
js
var context = null;// Use wx.createContext to get the drawing context context
var isButtonDown = false;//Whether it is being drawn
var arrx = [];//Abscissa of action
var arry = [];//Action ordinate
var arrz = [];//Always do state, marking a combination from pressing to lifting
var canvasw = 0;//Canvas width
var canvash = 0;//Canvas height
// pages/shouxieban/shouxieban.js
Page({
/**
* Initial data of the page
*/
data: {
//canvas width and height
canvasw: 0,
canvash: 0,
//The image path generated by canvas
canvasimgsrc: ""
},
// canvas initialization execution
startCanvas: function () {
var that = this;
//create canvas
this.initCanvas();
// get system information
wx.getSystemInfo({
success: function (res) {
canvasw = res.windowWidth - 0;//device width
canvash = canvasw;
that.setData({ 'canvasw': canvasw });
that.setData({ 'canvash': canvash });
}
});
},
//initialization function
initCanvas: function () {
// Use wx.createContext to get the drawing context context
context = wx.createCanvasContext('canvas');
context.beginPath()
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
},
//event listener
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;
},
//clear the canvas
cleardraw: function () {
//clear the canvas
arrx = [];
arry = [];
arrz = [];
context.clearRect(0, 0, canvasw, canvash);
context.draw(true);
},
//Submit signature content
setSign: function () {
var that = this;
if (arrx.length == 0) {
wx.showModal({
title: 'Tips',
content: 'Signature content cannot be empty! ',
showCancel: false
});
return false;
};
console.log("Not empty, canvas is about to generate pictures")
//generate image
wx.canvasToTempFilePath({
canvasId: 'canvas',
success: function (res) {
console.log("canvas can generate pictures")
console.log(res.tempFilePath, 'canvas image address');
that.setData({ canvasimgsrc: res.tempFilePath })
//code such as upload operation
},
fail: function () {
console.log("Canvas cannot generate pictures")
wx.showModal({
title: 'Tips',
content: 'The current version of WeChat is not supported, please update to the latest version! ',
showCancel: false
});
},
complete: function () {
}
})
},
/**
* Life cycle function--listen to page load
*/
onLoad: function (options) {
// canvas initialization execution
this.startCanvas();
}
})
css
/* pages/shouxieban/shouxieban.wxss */
/*writing board*/
page{
background: #f6f6f6;
padding: 5px auto
}
canvas{
border: 1px solid #d0d0d0;
margin: 5rpx;
background: #f2f2f2
}