微信小程序canvas写字板效果及实例
写字板效果：书写文字，画板重置，导出图片，导出图片前判断是否书写内容
app.json：
添加一个路由："pages/canvas/canvas"
然后就是：
canvas.wxml:
canvas.js:
},canvasMove: function (event) {
if (isButtonDown) {
arrz.push(1);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
// context.lineTo(event.changedTouches[0].x,event.changedTouches[0].y);
// context.stroke();
// context.draw()
};
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,canvasw,canvash);
context.stroke();
context.draw(true);
},canvasEnd: function (event) {
isButtonDown = false;
},cleardraw: function () {
//清除画布
arrx = [];
arry = [];
arrz = [];
context.clearRect(0,canvash);
context.draw(true);
},getimg: function(){
if (arrx.length==0){
wx.showModal({
title: '提示',content: '签名内容不能为空！',showCancel: false
});
return false;
};
//生成图片
wx.canvasToTempFilePath({
canvasId: 'canvas',success: function (res) {
console.log(res.tempFilePath);
//存入服务器
wx.uploadFile({
url: 'a.PHP',//接口地址
filePath: res.tempFilePath,name: 'file',formData: { //HTTP 请求中其他额外的 form data
'user': 'test'
},success: function (res) {
console.log(res);
},fail: function (res) {
console.log(res);
},complete: function (res) {
}
});}
})
},/**
- 页面的初始数据
*/
data: {
src: ""
},/** - 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 使用 wx.createContext 获取绘图上下文 context
context = wx.createCanvasContext('canvas');
context.beginPath()
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
}
})
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
