微信小程序 切水果效果

微信小程序中的切水果效果可以通过使用Canvas绘图实现。以下是一个简单的实现步骤：

1. 在小程序的wxml文件中添加一个Canvas标签，并设置其大小和id。

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

2. 在js文件中获取Canvas对象并设置绘图参数。

const ctx = wx.createCanvasContext('fruitCanvas')

ctx.setLineWidth(6) // 设置线条的宽度
ctx.setLineCap('round') // 设置线条的形状为圆形
ctx.setStrokeStyle('#f50') // 设置线条的颜色为橙色
ctx.setShadow(0, 0, 10, '#f50') // 设置线条的阴影效果

3. 监听手指触摸事件，在触摸移动的过程中绘制水果切割效果。

let isDrawing = false // 是否正在绘画中
let lastX = 0 // 上一个点的x坐标
let lastY = 0 // 上一个点的y坐标

wx.onTouchStart((event) => {
  isDrawing = true
  lastX = event.touches[0].x
  lastY = event.touches[0].y
})

wx.onTouchMove((event) => {
  if (isDrawing) {
    const currentX = event.touches[0].x
    const currentY = event.touches[0].y

    ctx.beginPath()
    ctx.moveTo(lastX, lastY)
    ctx.lineTo(currentX, currentY)
    ctx.stroke()

    lastX = currentX
    lastY = currentY

    ctx.draw(true) // 使用true参数实现连续绘制效果
  }
})

wx.onTouchEnd(() => {
  isDrawing = false
})

4. 在Canvas上添加水果图像，使得切割效果更加真实。

const imageSrc = 'fruit.png' // 水果图像的路径
wx.getImageInfo({
  src: imageSrc,
  success(res) {
    const canvasWidth = 300 // Canvas的宽度
    const canvasHeight = 500 // Canvas的高度
    const fruitWidth = 200 // 水果图像的宽度
    const fruitHeight = 250 // 水果图像的高度
    const x = (canvasWidth - fruitWidth) / 2 // 水果图像的x坐标
    const y = (canvasHeight - fruitHeight) / 2 // 水果图像的y坐标

    ctx.drawImage(res.path, x, y, fruitWidth, fruitHeight)
    ctx.draw(true)
  }
})

这样就可以实现一个简单的微信小程序切水果效果了。