圆角矩形

<template> 
  <canvas width="400" height="375" id="canvas" style="border: 1px solid #ccc;"></canvas>
</template>

<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'

function init() {
  const canvas = new fabric.Canvas('canvas') // 绑定canvas，传入id

  const rect = new fabric.Rect({
    top: 100, // 距离容器顶部 100px 
    left: 100, // 距离容器左侧 100px 
    fill: 'orange', // 填充 橙色 
    width: 100, // 宽度 100px 
    height: 100, // 高度 100px 
    rx: 20, // x轴的半径 
    ry: 20 // y轴的半径
  })

  // 将矩形添加到画布中
  canvas.add(rect)
}

onMounted(() => {
  init()
})
</script>

画圆角矩形，需要添加 rx 和 ry，这两个属性的值可以不一样，如果知道 css 圆角的原理，其实对 rx 和 ry 不难理解。

自己修改一下这两个值看看效果理解会更深刻。