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


Posted in Javascript onJune 15, 2017

微信小程序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:

<!--pages/canvas/canvas.wxml-->
<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
<button type="default" bindtap="cleardraw">清除画布</button>
<button type="default" bindtap="getimg">导出图片</button>

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[0].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);
   // 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, 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');


 }
})

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

Javascript 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
jQuery的事件预绑定
Dec 05 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 #Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 #Javascript
详解react-router如何实现按需加载
Jun 15 #Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 #jQuery
bootstrap daterangepicker汉化以及扩展功能
Jun 15 #Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 #Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 #Javascript
You might like
深入PHP变量存储的详解
2013/06/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
vue如何截取字符串
2019/05/06 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python守护进程用法实例分析
2015/06/04 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
python paramiko模块学习分享
2017/08/23 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
电大本科自我鉴定
2014/02/05 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
2015年学校减负工作总结
2015/05/19 职场文书