vue3使用canvas制作一个起伏的山脉/心电图效果,跟心跳脉动一样,随机高于平行线或者低于平行线或者持平

好的，我会尝试回答您的问题。首先，您需要了解一些canvas基础知识和Vue3的生命周期钩子函数。

1. 创建canvas元素

在Vue3中，可以通过`refs`获取到DOM元素，从而创建canvas元素。

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    // TODO: 画布相关操作
  }
}
</script>

2. 绘制起伏的山脉/心电图效果

可以通过在`mounted`钩子函数中使用`requestAnimationFrame`来实现动态效果。具体实现如下：

mounted() {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  const points = []; // 存储所有的点

  // 生成随机点
  for (let i = 0; i < width; i += 10) {
    const y = height / 2 + Math.random() * height / 4 * (Math.random() > 0.5 ? 1 : -1); // 随机高于平行线或者低于平行线或者持平
    points.push({x: i, y: y});
  }

  // 绘制山脉/心电图
  const draw = () => {
    ctx.clearRect(0, 0, width, height);
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    for (let i = 0; i < points.length - 1; i++) {
      const xc = (points[i].x + points[i + 1].x) / 2;
      const yc = (points[i].y + points[i + 1].y) / 2;
      ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc); // 绘制二次贝塞尔曲线
    }
    ctx.lineTo(points[points.length - 1].x, height);
    ctx.lineTo(0, height);
    ctx.closePath();
    ctx.fillStyle = '#ccc';
    ctx.fill();
    // 更新点的位置
    for (let i = 0; i < points.length; i++) {
      points[i].y += Math.random() * 4 * (Math.random() > 0.5 ? 1 : -1);
    }
    requestAnimationFrame(draw);
  };
  draw();
}

通过`Math.random()`函数生成随机点，然后使用二次贝塞尔曲线绘制山脉/心电图的轮廓线，并使用渐变填充颜色。每次更新点的位置，让山脉/心电图动态起伏。

3. 完整代码

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    const points = []; // 存储所有的点

    // 生成随机点
    for (let i = 0; i < width; i += 10) {
      const y = height / 2 + Math.random() * height / 4 * (Math.random() > 0.5 ? 1 : -1); // 随机高于平行线或者低于平行线或者持平
      points.push({x: i, y: y});
    }

    // 绘制山脉/心电图
    const draw = () => {
      ctx.clearRect(0, 0, width, height);
      ctx.beginPath();
      ctx.moveTo(points[0].x, points[0].y);
      for (let i = 0; i < points.length - 1; i++) {
        const xc = (points[i].x + points[i + 1].x) / 2;
        const yc = (points[i].y + points[i + 1].y) / 2;
        ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc); // 绘制二次贝塞尔曲线
      }
      ctx.lineTo(points[points.length - 1].x, height);
      ctx.lineTo(0, height);
      ctx.closePath();
      ctx.fillStyle = '#ccc';
      ctx.fill();
      // 更新点的位置
      for (let i = 0; i < points.length; i++) {
        points[i].y += Math.random() * 4 * (Math.random() > 0.5 ? 1 : -1);
      }
      requestAnimationFrame(draw);
    };
    draw();
  }
}
</script>

<style scoped>
canvas {
  width: 100%;
  height: 200px;
}
</style>

以上就是使用canvas和Vue3实现起伏的山脉/心电图效果的方法，希望能对您有所帮助。