多边形

<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')

  const polygon = new fabric.Polygon([
    {x: 30, y: 30},
    {x: 150, y: 140},
    {x: 240, y: 150},
    {x: 100, y: 30}
 ], {
   fill: '#ffd3b6', // 填充色 
   stroke: '#6639a6', // 线段颜色：紫色 
   strokeWidth: 5 // 线段粗细 5
 })
 canvas.add(polygon)
}

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

使用 new fabric.Polygon 绘制多边形，用法和 new fabric.Polyline 差不多，但最大的不同点是 new fabric.Polygon 会自动把 起始点 和 结束点 连接起来。