Fabric.js 设置画布背景

Fabric.js 设置画布背景

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

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

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

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

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

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

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

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

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

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

为什么可以？

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