Vue canvas 重新绘制后背景图 4个角有黑色圆角

在Vue.js中使用Canvas进行绘图并实现背景图片带有四个角落的黑色圆角，你需要做以下几个步骤：

1. 首先，在HTML中创建一个canvas元素，并给它设置一个固定宽高。例如：

<template>
  <div id="app">
    <canvas ref="myCanvas"></canvas>
  </div>
</template>

2. 然后，在JavaScript文件中获取canvas引用，创建一个context（上下文），并加载你的背景图片：

<script>
import { ref } from 'vue';

export default {
  setup() {
    const canvasRef = ref(null);
    const ctx = canvasRef.value.getContext('2d');

    // 加载背景图片
    let backgroundImg;
    async function loadImage(url) {
      backgroundImg = await new Promise((resolve) => {
        const img = new Image();
        img.src = url;
        img.onload = () => resolve(img);
      });
    }

    return {
      canvasRef,
      loadImage,
      drawBackgroundWithRoundedCorners,
    };
  },
  mounted() {
    // ...当组件挂载后加载图片并绘制
  },
};
</script>

3. `drawBackgroundWithRoundedCorners`函数会在画布上绘制背景图片并添加圆角效果：

methods: {
  drawBackgroundWithRoundedCorners() {
    if (backgroundImg) {
      ctx.drawImage(backgroundImg, 0, 0, this.canvasRef.value.width, this.canvasRef.value.height);

      // 使用globalCompositeOperation改变混合模式绘制圆角矩形
      ctx.beginPath();
      ctx.arc(0, 0, 10, 0, Math.PI * 2); // 设置圆角半径
      ctx.clip(); // 开始剪切区域

      // 绘制透明的圆角矩形覆盖背景
      ctx.fillStyle = "rgba(0,0,0,0.5)";
      ctx.fillRect(0, 0, this.canvasRef.value.width, this.canvasRef.value.height);
    }
  },
},

4. 调用`loadImage`并在合适的时候（如组件挂载完成后或数据更新时）调用`drawBackgroundWithRoundedCorners`。