当前位置：首页 > ds >正文

Fabric.js 设置画布背景

ds 2025/7/12 17:57:33

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><divclass="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>

为什么可以？