微信小程序简单签名实现

最新推荐文章于 2024-05-17 11:16:29 发布

九亿少女无法触及的梦ى

最新推荐文章于 2024-05-17 11:16:29 发布

阅读量565

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_39557024/article/details/126603635

版权

微信小程序专栏收录该内容

12 篇文章 0 订阅

订阅专栏

利用canvas 实现

wxml

<view class="dashbox">
  <view class="btnList">
    <van-button size="small" bindtap="clearCanvas">清空</van-button>
  </view>
  <view class="handCenter">
    <canvas 
      class="handWriting" 
      disable-scroll="{{true}}" 
      id="myCanvas"
      bindtouchstart="scaleStart"
      bindtouchmove="scaleMove" 
      bindtouchend="scaleEnd"
      bindtap="mouseDown"
      type="2d"
    >
    </canvas>
  </view>
</view>

js

Page({
  onShow() {
    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
        this.width = canvas.width;
        this.height = canvas.height;
        ctx.scale(dpr, dpr)
        this.ctx = ctx;
      })
  },
  scaleStart(e) {
    console.log(111,e)
    let {x,y} = e.touches[0]
    console.log(x,y)
    this.ctx.beginPath()
    this.ctx.moveTo(x,y)
    this.ctx.strokeStyle="#0000ff";
    this.ctx.lineWidth = '10'
  },
  scaleMove(e){
    console.log(e)
    let {x,y} = e.touches[0]
    this.ctx.lineTo(x,y)
    this.ctx.stroke();
    this.ctx.lineCap="round";
    this.ctx.moveTo(x,y)
    
  },
  scaleEnd(e){
    console.log(111,e)
    this.ctx.lineCap="round";
  },
  clearCanvas(){
    this.ctx.clearRect(0,0,this.width,this.height)
    this.ctx.draw(true)
  }
})