微信小程序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 相关文章推荐
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
vuex与组件联合使用的方法
May 10 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 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中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
JavaScript中继承用法实例分析
2015/05/16 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
python实现多线程抓取知乎用户
2016/12/12 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
生物技术研究生自荐信
2013/11/12 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
食品安全承诺书范文
2014/08/29 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
骨干教师申报材料
2014/12/17 职场文书
考勤制度通知
2015/04/25 职场文书
钢琴师观后感
2015/06/12 职场文书
基石观后感
2015/06/12 职场文书
学校财务管理制度
2015/08/04 职场文书
2016年寒假生活小结
2015/10/10 职场文书
初中化学教学反思
2016/02/22 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python