Blazor Server中如何排除Canvas元素避免DOM操作后位置偏移？

方法1：用永不重渲染的组件包裹Canvas #

Blazor默认会在状态变化时重新渲染组件，要是不想让Canvas被Blazor的渲染逻辑干扰，直接写个自定义组件强制它不重渲染：

@* NoRenderComponent.razor *@
@ChildContent
@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    protected override bool ShouldRender()
    {
        // 永远返回false，阻止Blazor重新渲染组件内部内容
        return false;
    }
}

然后在页面里用这个组件套住Canvas：

<div class="page-middle-content">
    <p>页面中部的其他内容</p>
    <NoRenderComponent>
        <canvas id="myCanvas"></canvas>
    </NoRenderComponent>
    <p>Canvas下方的内容</p>
</div>

这样Blazor不会碰这个组件内部的DOM，JS更新Canvas时，不会触发Blazor的DOM校验，自然不会把Canvas移到页面底部。

方法2：通过ElementReference让JS操作Canvas（推荐） #

别直接用ID拿Canvas，改用Blazor的ElementReference把元素传给JS，JS只操作Canvas的绘图上下文，不改动DOM结构，Blazor就不会觉得DOM不匹配：

页面代码：

<div class="page-middle-content">
    <p>页面中部的其他内容</p>
    <canvas @ref="canvasRef"></canvas>
    <p>Canvas下方的内容</p>
</div>

@code {
    private ElementReference canvasRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 首次渲染完，把Canvas引用传给JS初始化绘图
            await JSRuntime.InvokeVoidAsync("initCanvas", canvasRef);
        }
    }
}

对应的JS代码（放wwwroot/js/app.js里）：

window.initCanvas = (canvas) => {
    const ctx = canvas.getContext('2d');
    // 这里写你的绘图逻辑，比如画个红方块
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 50, 50);
    
    // 后续更新也直接操作这个canvas对象，别改DOM结构
};

方法3：禁用Blazor对Canvas的DOM校验（谨慎使用） #

如果前两种方法都不适用，能通过JS给Canvas加个特殊属性，让Blazor忽略它的DOM检查：

// Blazor加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        const canvas = document.getElementById('myCanvas');
        canvas.setAttribute('data-blazor-ignore', 'true');
    }, 100);
});

注意：这个方法依赖Blazor内部实现，后续版本可能失效，优先用前两种方案。

内容的提问来源于stack exchange，提问作者J.John