如何设置Excalidraw画布背景透明以实现网页标注

要实现Excalidraw画布透明、标注内容叠加在现有HTML上方的效果，不需要手动操作canvas的clearRect或globalAlpha，直接通过组件配置和容器样式即可解决：

• 配置Excalidraw组件背景为透明
  在初始化组件时，通过initialData.appState.backgroundColor将画布背景设为transparent，这是最直接的方式，不会干扰Excalidraw自身的渲染逻辑。

• 设置容器层样式
  外层容器需要固定定位覆盖整个视口，同时通过pointerEvents控制交互穿透，保证下方HTML可正常操作，画布仅在绘制时响应事件。

修改后的WhiteBoard组件示例：

import { Excalidraw } from "@excalidraw/excalidraw";

export default function WhiteBoard() {
  return (
    <div style={{ 
      position: "fixed", 
      top: 0, 
      left: 0, 
      width: "100%", 
      height: "100%", 
      pointerEvents: "none",
      zIndex: 9999 // 确保画布在页面最上层
    }}>
      <Excalidraw
        pointerEvents="auto"
        initialData={{
          appState: {
            backgroundColor: "transparent",
          },
        }}
        onChange={(elements) => {
          // 按需处理绘制内容的变化
        }}
      />
    </div>
  );
}

常见问题说明 #

1. 为什么clearRect会清除绘制内容？
   Excalidraw依赖自身的渲染循环维护画布内容，手动调用clearRect会破坏它的渲染状态，导致已绘制的元素被清除，因此不要直接操作canvas元素。

2. globalAlpha的问题
   globalAlpha是控制整个canvas绘制内容的全局透明度，会让标注线条、形状也变透明，这和“背景透明、内容不透明”的需求不符，完全不需要使用这个属性。

内容的提问来源于stack exchange，提问作者Vicky Kumar