微信小程序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');


 }
})
 

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

# 微信小程序canvas  # 微信小程序canvas实例详解  # 微信小程序 二维码canvas绘制实例详解  # 详解微信小程序canvas圆角矩形的绘制的方法  # 微信小程序canvas拖拽、截图组件功能  # 在小程序中使用canvas的方法示例  # 微信小程序使用canvas的画图操作示例  # 微信小程序用canvas画图并分享  # 微信小程序对图片进行canvas压缩的方法示例详解  # 微信小程序实现Canvas画板源代码  # 写字板  # 周期函数  # 希望能  # 谢谢大家  # 为空  # 判断是否  # 加载  # bindtouchend  # canvasMove  # canvasEnd  # canvasIdErrorCallback  # binderror  # touchcancel  # bindtouchmove  # disable  # id  # bindtap  # canvasStart  # bindtouchstart  # scroll 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 制作公司内部网站有哪些,内网如何建网站？  高防服务器租用如何选择配置与防御等级？  JavaScript如何实现类型判断_typeof和instanceof有什么区别  如何用wdcp快速搭建高效网站？  零基础网站服务器架设实战：轻量应用与域名解析配置指南  Laravel观察者模式如何使用_Laravel Model Observer配置  Bootstrap整体框架之JavaScript插件架构  网站制作报价单模板图片,小松挖机官方网站报价？  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  Laravel如何使用Blade模板引擎？（完整语法和示例）  js实现点击每个li节点，都弹出其文本值及修改  Python并发异常传播_错误处理解析【教程】  如何在服务器上三步完成建站并提升流量？  edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】  详解jQuery中基本的动画方法  Laravel Admin后台管理框架推荐_Laravel快速开发后台工具  实例解析angularjs的filter过滤器  node.js报错：Cannot find module 'ejs'的解决办法  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  如何用已有域名快速搭建网站？  JavaScript常见的五种数组去重的方式  米侠浏览器网页背景异常怎么办 米侠显示修复  Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  Laravel如何实现本地化和多语言支持？（i18n教程）  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  微信小程序 配置文件详细介绍  Android自定义控件实现温度旋转按钮效果  如何在宝塔面板中创建新站点？  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  Laravel如何生成API文档？（Swagger/OpenAPI教程）  如何在万网开始建站？分步指南解析  中国移动官方网站首页入口 中国移动官网网页登录  如何在阿里云完成域名注册与建站？  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法  JavaScript如何实现错误处理_try...catch如何捕获异常？  猎豹浏览器开发者工具怎么打开 猎豹浏览器F12调试工具使用【前端必备】  1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤  如何安全更换建站之星模板并保留数据？  高防服务器如何保障网站安全无虞？  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  HTML 中动态设置元素 name 属性的正确语法详解  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理