找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索本站精品资源

搜索

首页 › 教程频道› 小程序开发 › 查看内容

微信小程序--绘图canvas

作者：模板之家 2017-12-19 10:33 3587人关注

view plain copy canvas class = canvas id = canvas canvas-id = canvas disable-scroll = true bindtouchstart = canvasStart bindtouchmove = canvasMove bindtouchend = canvasEnd touchcancel = canvasEnd bind ...

 
[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. 邀请

路过
雷人
握手
鲜花
鸡蛋
原作者: 模板之家 来自: 网络收集
上一篇：微信小程序实战篇-下拉刷新与加载更多
下一篇：微信小程序--如何实现动画效果

全部回复(0)

Copyright © Comsenz Inc. Powered by Discuz!X3.5 蜀ICP备12013697号
微信：xu08290201 QQ：75283535