uniapp 水波纹 特效

Uniapp 水波纹特效可以通过以下步骤实现：

1. 在页面中引入 `uni-canvas` 组件。

2. 在 `uni-canvas` 组件中定义一个 `canvas` 元素，并设置它的宽度和高度。

3. 获取 `canvas` 元素的上下文对象 `ctx`。

4. 在 `canvas` 中绘制一个圆形。

5. 定义一个 `drawRipple` 函数，用于绘制水波纹效果。

6. 在 `drawRipple` 函数中，使用 `ctx.arc` 方法绘制圆形，并使用 `ctx.clip` 方法将圆形剪切出来。

7. 使用 `ctx.beginPath` 方法开始绘制水波纹。

8. 在 `drawRipple` 函数中，使用 `setInterval` 方法定时执行绘制水波纹的动画效果。

9. 在 `setInterval` 方法中，使用 `ctx.clearRect` 方法清除画布上的内容，并调用 `drawRipple` 函数绘制水波纹。

10. 在页面中调用 `drawRipple` 函数，即可在 `canvas` 中看到水波纹特效。

以下是示例代码：

<template>
  <view>
    <uni-canvas canvas-id="canvas" :canvas-type="'2d'" :style="{width: '100%', height: '100%'}"></uni-canvas>
  </view>
</template>

<script>
export default {
  onReady() {
    const ctx = uni.createCanvasContext('canvas', this);

    function drawRipple() {
      let radius = 50;
      let maxRadius = 100;
      let alpha = 1;
      let interval = setInterval(() => {
        if (radius < maxRadius) {
          alpha -= 0.05;
          radius += 2;
          ctx.save();
          ctx.beginPath();
          ctx.arc(150, 150, radius, 0, 2 * Math.PI);
          ctx.clip();
          ctx.clearRect(0, 0, 300, 300);
          ctx.fillStyle = `rgba(0, 0, 0, ${alpha})`;
          ctx.fillRect(0, 0, 300, 300);
          ctx.restore();
        } else {
          clearInterval(interval);
        }
      }, 30);
    }

    drawRipple();
  },
};
</script>