旋转背景图

<template> 
  <canvas width="400" height="400" 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')

  // 设置背景图 
  // 参数1：背景图资源（可以引入本地，也可以使用网络图） 
  // 参数2：设置完背景图执行以下重新渲染canvas的操作，这样背景图就会展示出来了
  canvas.setBackgroundImage(
    'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
    canvas.renderAll.bind(canvas),
    {
      angle: 15 // 旋转背景图
    }
  )
}

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

setBackgroundImage 还有第三个参数，嘿嘿嘿没想到吧

第三个参数除了旋转，还可以设置 scaleX、scaleY 之类的操作。

更多设置可以查看 『文档』 。

但这个例子存在一个问题，如果图片的尺寸没 canvas 容器大，就填不满，否则就溢出（只显示图片的局部）。

解决方案请看下一个案例。