Fabric.js 设置画布背景

Fabric.js 设置画布背景

直接设置 Canvas 标签CSS静态样式

通过直接设置 Canvas 属性能够得到画布的背景，但是这种情况下有一个缺点，那就是不能动态变化。

<template>
  <canvas ref="canvasRef" class="my-canvas"></canvas>
</template>

<style>
.my-canvas {
  width: 500px;
  height: 300px;
  background-image: url('@/assets/bg.jpg');
  background-size: cover;
  background-position: center;
}
</style>

利用 Vue 动态设置 Canvas 样式属性

这个也能够直接达成目标，但是当我开启画画以后我们绘画的东西全部都会消失。

<canvas :style="{backgroundImage:url(${imageUrl})}" ref="canvasRef"></canvas>

为什么设置静态 CSS 不会消失，问题原因：

Vue 会在渲染时 将背景图以行内样式的形式添加到 canvas 元素上。这本身没问题，但和你后续的 canvas API 绘图行为 可能发生 时机冲突或覆盖，因为：

• Canvas 是一个“位图”绘图容器，任何通过 canvas API 绘制的内容是独立的“像素绘图”。
• 而 background-image 是通过 CSS 设置的，是渲染层叠系统的内容，不是真正绘制到 canvas 的“图层”上。
• 当你使用 :style 设置背景图时，它可能在你 canvas 绘图之后重新渲染，从而影响视觉结果。

直接在 Canvas 外层套一个标签就解决了

改为使用一个容器 div 来放 canvas，并给容器设置背景图

这样你绘画再怎么搞，背景都不会受影响！

<template>
  <div
    class="canvas-wrapper"
    :style="{ backgroundImage: `url(${imageUrl})` }"
  >
    <canvas ref="canvasRef" width="500" height="300"></canvas>
  </div>

  <button @click="changeBackground">切换背景</button>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const canvasRef = ref(null)
const imageUrl = ref('/wallhaven-4gxj23.jpg') // 初始背景图

onMounted(() => {
  const ctx = canvasRef.value.getContext('2d')

  // 模拟画个方块
  ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'
  ctx.fillRect(50, 50, 100, 100)
})

function changeBackground() {
  imageUrl.value = '/wallhaven-nz3k58.jpg'
}
</script>

<style>
.canvas-wrapper {
  width: 500px;
  height: 300px;
  background-size: cover;
  background-position: center;
  border: 1px solid #ccc;
  position: relative;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}
</style>

为什么可以？

• 背景图不再属于 canvas，而是它的容器。
• canvas 只负责绘图行为，不再影响背景。
• 就算你清空 canvas、调整大小，背景图依然稳如老狗。