小程序canvas签字功能

原创于 2020-09-13 20:15:43 发布 · 284 阅读

1 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了一种在微信小程序中实现手绘板的方法。通过使用canvas组件，结合touchstart和touchmove事件，实现了连续的线条绘制效果。文章提供了完整的wxml、js和wxss代码示例，展示了如何创建画布上下文，处理触摸事件以绘制线条，并实时更新画布。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图

在这里插入图片描述

上代码

canvas.wxml

<canvas
 canvas-id="canvas"
 id="canvas"
 bindtouchstart="touchstart"
 bindtouchmove="touchmove"
></canvas>

canvas.js

Page({
  data: {
    context:null
  },
  onShow(){
    const context = wx.createCanvasContext('canvas')
    this.setData({
      context: context
    })
    context.draw()
  },
  /**记录开始点 */
  touchstart: function (e) {
    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
  },
  /**记录移动点，刷新绘制 */
  touchmove: function (e) {
    this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
    this.data.context.stroke();
    this.data.context.draw(true);
    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
  },
})

canvas.wxss

#canvas{
  width: 100%;
  height: 600rpx;
  box-sizing: border-box;
  background: #fff;
}
page{
  background: #ccc;
}