微信小程序canvas写字板效果及实例_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-11 01:54:14 点击率：次

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

上一篇：如何优雅地遍历结构不确定的多维嵌套数组（PHP递归解析API

下一篇：Debian DHCP服务器版本选择建议

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何优雅地遍历结构不确定的多维嵌套数组（PHP递归解析API

下一篇：Debian DHCP服务器版本选择建议