vue 中 利用canvas画一个爱心

可以使用以下代码在 Vue 中利用 Canvas 画一个爱心：

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

<script>
export default {
  mounted() {
    this.drawHeart();
  },
  methods: {
    drawHeart() {
      const canvas = this.$refs.canvas;
      const context = canvas.getContext("2d");

      context.beginPath();
      context.moveTo(75, 40);
      context.bezierCurveTo(75, 37, 70, 25, 50, 25);
      context.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
      context.bezierCurveTo(20, 80, 40, 102, 75, 120);
      context.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
      context.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
      context.bezierCurveTo(85, 25, 75, 37, 75, 40);
      context.fillStyle = "#FF6A6A";
      context.fill();
    },
  },
};
</script>

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

在上面的代码中，我们使用 `bezierCurveTo` 方法来绘制爱心的曲线，然后使用 `fillStyle` 属性设置填充颜色，并使用 `fill` 方法填充颜色。最后，我们将 Canvas 元素的引用传递给 `ref` 属性，然后使用 `$refs` 属性获取该元素的引用。