vue使用canvas绘制圆形图片

你可以使用以下代码来在Vue中使用canvas绘制圆形图片：

<template>
  <div>
    <canvas ref="canvas" :width="size" :height="size"></canvas>
  </div>
</template>

<script>
export default {
  name: 'CircleImage',
  props: {
    imageUrl: {
      type: String,
      required: true
    },
    size: {
      type: Number,
      default: 100
    }
  },
  mounted() {
    this.drawCircleImage();
  },
  methods: {
    drawCircleImage() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.src = this.imageUrl;
      img.onload = () => {
        ctx.beginPath();
        ctx.arc(this.size / 2, this.size / 2, this.size / 2, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.clip();
        ctx.drawImage(img, 0, 0, this.size, this.size);
      };
    }
  }
}
</script>

<style scoped>
canvas {
  border-radius: 50%;
}
</style>

该组件接收一个图片的Url和图片大小两个参数，使用canvas绘制一个圆形的图片。在mounted钩子函数中，调用drawCircleImage方法来绘制图片。其中，使用clip方法将绘制区域限制在圆形内部。最后，通过绘制图片实现圆形图片的效果。