加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 20:15:01 所属栏目:资源 来源:网络整理
导读:微信小程序canvas写字板效果及实例 写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" 然后就是: canvas.wxml: canvas.js: },canvasMove: function (event) { if (isButtonDown) { ar

微信小程序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');

}
})

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读