微信小程序canvas手写签字

html 复制代码
<view style="width: 90%;height: 260px;background: #f5f5f5;margin: auto;">
  <canvas
  type="2d"
  id="myCanvas"
  style="width: 100%; height: 100%;"
  bindtouchstart="start"
  bindtouchmove="move"
  bindtouchend="end"
></canvas>
</view>
javascript 复制代码
const app = getApp()
 
Page({
  data: {
    ctx:'',
  },
 
  onLoad: function () {
    this.initcanvas();
  },
  initcanvas(){ //初始化画布
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio;//缩放级别
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
        ctx.lineGap = 'round';
        ctx.lineJoin = 'round';
        ctx.lineWidth = 5; // 字体粗细
        this.setData({ 
          ctx:ctx, 
          canvas:canvas 
        })
      })
  },
  start(e){
    this.data.ctx.beginPath(); // 开始创建一个路径,如果不调用该方法,最后无法清除画布
    this.data.ctx.moveTo(e.changedTouches[0].x,e.changedTouches[0].y) //移动路径开始点 x,y
  },
  move(e){
    this.data.ctx.lineTo(e.changedTouches[0].x,e.changedTouches[0].y);//添加直线路径x,y
    this.data.ctx.stroke(); //填充
  },
  end(){
    
  },
})

要在微信小程序中使用Canvas手写签字功能,你可以按照以下步骤进行操作:

  1. 在小程序的页面中添加一个Canvas组件,类似于以下代码:

```html

<canvas id="canvas" canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>

```

  1. 在页面的js文件中,获取Canvas组件的上下文对象,然后进行相关的操作。例如,以下是一个简单的手写签字功能的示例代码:

```javascript

Page({

data: {

context: null,

isDrawing: false,

lastX: 0,

lastY: 0

},

onLoad: function () {

// 获取Canvas上下文对象

this.data.context = wx.createCanvasContext('myCanvas');

},

touchstart: function (e) {

// 记录手指触摸的初始位置,并开始绘制

this.data.lastX = e.touches[0].x;

this.data.lastY = e.touches[0].y;

this.data.context.beginPath();

this.data.isDrawing = true;

},

touchmove: function (e) {

// 绘制手写轨迹

if (this.data.isDrawing) {

this.data.context.moveTo(this.data.lastX, this.data.lastY);

this.data.context.lineTo(e.touches[0].x, e.touches[0].y);

this.data.context.stroke();

this.data.lastX = e.touches[0].x;

this.data.lastY = e.touches[0].y;

this.data.context.draw(true);

}

},

touchend: function () {

// 结束绘制

this.data.isDrawing = false;

},

clearCanvas: function () {

// 清空Canvas

this.data.context.clearRect(0, 0, 300, 300);

this.data.context.draw(true);

}

})

```

  1. 在wxml文件中,绑定Canvas的触摸事件,例如:

```html

<canvas id="canvas" canvas-id="myCanvas" style="width: 100%; height: 100%;" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"></canvas>

<button bindtap="clearCanvas">清除</button>

```

这样,你就可以在小程序中实现手写签字功能了。用户在Canvas上手指触摸并滑动时,会绘制出手写轨迹;点击清除按钮时,会清除Canvas上的内容。

相关推荐
老李不敲代码15 小时前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa16 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J17 小时前
管理100个小程序-很难吗
android·小程序
qq_3573896318 小时前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计1 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技2 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序
依辰2 天前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序
fakaifa2 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
18538162800余。2 天前
NFC 碰一碰实现视频源码,网页与小程序协同
小程序
换日线°2 天前
微信小程序拖拽排序有效果图
微信小程序