小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

微信小程序--绘图canvas

发布时间：2017-12-19 10:34 所属栏目：小程序开发教程
 
[html] view plain copy
 
  1. <canvas class="canvas"  id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>  
  2. <button type="default" bindtap="cleardraw">清除画布</button>  
  3. <button type="default" bindtap="getimg">导出图片</button>  
[css] view plain copy
 
  1. Page {    
  2.   background: #cfeeff;    
  3. }    
  4. .canvas{  
  5.   width: 100%;  
  6.   height: 680rpx;  
  7. }  
[plain] view plain copy
 
  1. {  
  2.   "navigationBarTitleText": "画板",  
  3.   "navigationBarBackgroundColor": "#eee200"  
  4. }  
[javascript] view plain copy
 
  1. // canvas 全局配置  
  2. var context = null;// 使用 wx.createContext 获取绘图上下文 context  
  3. var isButtonDown = false;  
  4. var arrx = [];  
  5. var arry = [];  
  6. var arrz = [];  
  7. var canvasw = 0;  
  8. var canvash = 0;  
  9. //获取系统信息  
  10. wx.getSystemInfo({  
  11.   success: function (res) {  
  12.     canvasw = res.windowWidth;//设备宽度  
  13.     canvash = res.windowHeight;  
  14.   }  
  15. });  
  16. //注册页面  
  17. Page({  
  18.   
  19.   canvasIdErrorCallback: function (e) {  
  20.     console.error(e.detail.errMsg)  
  21.   },  
  22.   canvasStart: function (event) {  
  23.     isButtonDown = true;  
  24.     arrz.push(0);  
  25.     arrx.push(event.changedTouches[0].x);  
  26.     arry.push(event.changedTouches[0].y);  
  27.     //context.moveTo(event.changedTouches[0].x, event.changedTouches[0].y);  
  28.   },  
  29.   canvasMove: function (event) {  
  30.     if (isButtonDown) {  
  31.       arrz.push(1);  
  32.       arrx.push(event.changedTouches[0].x);  
  33.       arry.push(event.changedTouches[0].y);  
  34.       // context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);  
  35.       // context.stroke();  
  36.       // context.draw()  
  37.     };  
  38.     for (var i = 0; i < arrx.length; i++) {  
  39.       if (arrz[i] == 0) {  
  40.         context.moveTo(arrx[i], arry[i])  
  41.       } else {  
  42.         context.lineTo(arrx[i], arry[i])  
  43.       };  
  44.     };  
  45.     context.clearRect(0, 0, canvasw, canvash);  
  46.     context.stroke();  
  47.     context.draw(true);  
  48.   },  
  49.   canvasEnd: function (event) {  
  50.     isButtonDown = false;  
  51.   },  
  52.   cleardraw: function () {  
  53.     //清除画布  
  54.     arrx = [];  
  55.     arry = [];  
  56.     arrz = [];  
  57.     context.clearRect(0, 0, canvasw, canvash);  
  58.     context.draw(true);  
  59.   },  
  60.   getimg: function () {  
  61.     if (arrx.length == 0) {  
  62.       wx.showModal({  
  63.         title: '提示',  
  64.         content: '签名内容不能为空！',  
  65.         showCancel: false  
  66.       });  
  67.       return false;  
  68.     };  
  69.     //生成图片  
  70.     wx.canvasToTempFilePath({  
  71.       canvasId: 'canvas',  
  72.       success: function (res) {  
  73.         console.log(res.tempFilePath);  
  74.         //存入服务器  
  75.         wx.uploadFile({  
  76.           url: 'a.php', //接口地址  
  77.           filePath: res.tempFilePath,  
  78.           name: 'file',  
  79.           formData: { //HTTP 请求中其他额外的 form data   
  80.             'user': 'test'  
  81.           },  
  82.           success: function (res) {  
  83.             console.log(res);  
  84.           },  
  85.           fail: function (res) {  
  86.             console.log(res);  
  87.           },  
  88.           complete: function (res) {  
  89.           }  
  90.         });  
  91.       }  
  92.     })  
  93.   },  
  94.   /** 
  95.    * 页面的初始数据 
  96.    */  
  97.   data: {  
  98.     src: ""  
  99.   },  
  100.   
  101.   /** 
  102.    * 生命周期函数--监听页面加载 
  103.    */  
  104.   onLoad: function (options) {  
  105.     // 使用 wx.createContext 获取绘图上下文 context  
  106.     context = wx.createCanvasContext('canvas');  
  107.     context.beginPath()  
  108.     context.setStrokeStyle('#ffff00');  
  109.     context.setLineWidth(10);  
  110.     context.setLineCap('round');  
  111.     context.setLineJoin('round');  
  112.   },  
  113.   
  114.   /** 
  115.    * 生命周期函数--监听页面初次渲染完成 
  116.    */  
  117.   onReady: function () {  
  118.     
  119.   },  
  120.   
  121.   /** 
  122.    * 生命周期函数--监听页面显示 
  123.    */  
  124.   onShow: function () {  
  125.     
  126.   },  
  127.   
  128.   /** 
  129.    * 生命周期函数--监听页面隐藏 
  130.    */  
  131.   onHide: function () {  
  132.     
  133.   },  
  134.   
  135.   /** 
  136.    * 生命周期函数--监听页面卸载 
  137.    */  
  138.   onUnload: function () {  
  139.     
  140.   },  
  141.   
  142.   /** 
  143.    * 页面相关事件处理函数--监听用户下拉动作 
  144.    */  
  145.   onPullDownRefresh: function () {  
  146.     
  147.   },  
  148.   
  149.   /** 
  150.    * 页面上拉触底事件的处理函数 
  151.    */  
  152.   onReachBottom: function () {  
  153.     
  154.   },  
  155.   
  156.   /** 
  157.    * 用户点击右上角分享 
  158.    */  
  159.   onShareAppMessage: function () {  
  160.     
  161.   }  
  162. })  


易优小程序（企业版）+灵活api+前后代码开源 码云仓库:starfork
本文地址：https://www.eyoucms.com/wxmini/doc/course/18206.html 复制链接 如需定制请联系易优客服咨询：800182392 点击咨询

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

产品

服务

帮助

关于

工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务

联系我们
QQ在线咨询