微信小程序canvas写字板效果及实例

微信小程序canvas写字板效果及实例

微信小程序canvas写字板效果及实例

写字板效果：书写文字，画板重置，导出图片，导出图片前判断是否书写内容

app.json：

添加一个路由："pages/canvas/canvas"

{

"pages":[

"pages/index/index",

"pages/logs/logs",

"pages/canvas/canvas"

],

"window":{

"navigationBarBackgroundColor": "#ea6a46",

"navigationBarTextStyle":"white",

"navigationBarTitleText": "写字板",

"backgroundTextStyle":"dark",

"backgroundColor":"white",

"enablePullDownRefresh":"true"

}

}

然后就是：

canvas.wxml:

清除画布

导出图片

canvas.js:

// canvas 全局配置

var context = null;// 使用 wx.createContext 获取绘图上下文 context

var isButtonDown = false;

var arrx = [];

var arry = [];

var arrz = [];

var canvasw = 0;

var canvash = 0;

//获取系统信息

wx.getSystemInfo({

success: function (res) {

canvasw = res.windowWidth;//设备宽度

canvash = res.windowWidth*7/15;

}

});

//注册页面

Page({

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);

//context.moveTo(event.changedTouches[0].x, event.changedTouches[abMZl0].y);

},

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);

//http:// 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.clearhttp://Rect(0, 0, canvasw, canvash);

context.stroke();

context.draw(true);

},

canvasEnd: function (event) {

isButtonDown = false;

},

cleardraw: function () {

//清除画布

arrx = [];

arry = [];

arrz = [];

context.clearRect(0, 0, canvasw, 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');

}

})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。