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

概述

在微信小程序中，使用canvas可以实现很多有趣的效果，如播放动画、绘制图形等等。其中，canvas写字板效果可以让用户在小程序中手写文字，增加用户体验和交互性。在本教程中，我们将详细讲解如何使用canvas实现写字板效果，并提供两个示例说明。

步骤

第一步：创建画布

在小程序页面中添加canvas标签，并设置宽度和高度，创建画布。在画布中绘制内容时，需要获取画布的上下文(context)。代码如下：

<canvas id="canvas" width="300" height="200"></canvas>

const ctx = wx.createCanvasContext('canvas')

第二步：绑定事件

为了实现手写，需要在画布上绑定事件，包括touchstart、touchmove、touchend等事件。当用户在画布上滑动时，需要将其轨迹记录下来。代码如下：

let startX, startY
let isDown = false
let points = []

wx.createSelectorQuery().select('#canvas').fields({ node: true, size: true }).exec(res => {
  canvas = res[0].node

  canvas.addEventListener('touchstart', function (e) {
    startX = e.touches[0].x
    startY = e.touches[0].y
    isDown = true
    points.push({ x: e.touches[0].x, y: e.touches[0].y })
  })

  canvas.addEventListener('touchmove', function (e) {
    if (!isDown) return
    const x = e.touches[0].x
    const y = e.touches[0].y
    points.push({ x, y })

    ctx.beginPath()
    ctx.moveTo(startX, startY)
    ctx.lineTo(x, y)
    ctx.stroke()
    startX = x
    startY = y
    ctx.draw(true)
  })

  canvas.addEventListener('touchend', function () {
    isDown = false
  })
})

第三步：清空画布

为了提供清空屏幕的功能，我们需要在页面中添加一个按钮，点击时清空画布的内容。代码如下：

<view class="container">
  <canvas id="canvas" width="300" height="200"></canvas>
  <button class="clear" bindtap="clear">清空</button>
</view>

clear() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.draw(true)
  points = []
}

示例说明

示例一：小程序书法练习

在这个示例中，我们使用canvas实现一个小程序书法练习程序。用户可以在画布上写出字帖中的文字，并且可以清空画布。代码如下：

<view class="container">
  <canvas id="canvas" width="300" height="200"></canvas>
  <image class="source" src="/images/kaishu.png"></image>
  <button class="clear" bindtap="clear">清空</button>
</view>

Page({
  clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.draw(true)
    points = []
  }
})

其中，/images/kaishu.png是预设的字帖图片。效果如下：

示例二：手写板块贴图

在这个示例中，我们使用canvas实现一个手写板块贴图程序。用户可以在画布上画出手写图案，并将其放置在贴图中。代码如下：

<view class="container">
  <canvas id="canvas" width="300" height="200"></canvas>
  <image class="source" src="/images/plate.png"></image>
</view>

Page({
  clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.draw(true)
    points = []
  },
  save() {
    wx.canvasToTempFilePath({
      canvas,
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success() {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
            })
          },
          fail(err) {
            console.error(err)
          },
        })
      },
    })
  },
})

其中，/images/plate.png是预设的手写板块贴图。用户在画布上绘制图案后，可以点击保存按钮，将画布保存为图片。效果如下：

总结

canvas写字板是小程序开发中非常有趣和实用的一个功能，在开发过程中可以根据需求添加不同的功能扩展。本教程介绍了如何实现canvas写字板的功能，并提供了两个示例说明。希望能够对读者有所帮助。