重复背景图

复制
<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')
 
  canvas.setBackgroundColor({
    source: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:40:40:40:40.awebp',
    repeat: 'repeat'
  }, canvas.renderAll.bind(canvas))
}
 
onMounted(() => {
  init()
})
</script>

这个例子使用的图片尺寸是比较小的，所以在 setBackgroundColor 的第3个参数中设置了 repeat: 'repeat' ，表示重复渲染图片。