微信小程序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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
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 如何向 MySQL 发送数据
2006/10/09 PHP
CI框架的安全性分析
2016/05/18 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
初婚初育证明
2014/01/14 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
电大本科自我鉴定
2014/02/05 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
汽车转让协议书
2015/01/29 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers