如何通过JavaScript获取Blazor页面（不含侧边菜单）的尺寸？

针对默认Blazor模板带左侧菜单栏的场景，你需要获取Canvas所在的主内容区域尺寸而非整个窗口尺寸，以下是两种可行方案：

方案1：直接获取默认模板的主内容容器尺寸 #

默认Blazor模板的主内容区域通常是<main>标签，直接在JS中获取该元素的clientWidth和clientHeight即可得到不含侧边栏的可用空间：

修改你的JavaScript代码：

function SetCanvasSize(element) {
    // 获取默认模板的主内容容器
    const mainContent = document.querySelector('main');
    if (!mainContent) return;

    const usableWidth = mainContent.clientWidth;
    const usableHeight = mainContent.clientHeight;

    // 设置Canvas的实际绘制尺寸
    element.width = usableWidth;
    element.height = usableHeight;

    const ctx = element.getContext('2d');
    // 测试绘制：画一个边框验证尺寸
    ctx.strokeStyle = '#000';
    ctx.strokeRect(0, 0, usableWidth - 1, usableHeight - 1);

    console.log('可用宽度:', usableWidth, '可用高度:', usableHeight);
}

方案2：传递Canvas父容器引用（更灵活） #

如果Canvas放在自定义容器中，或者模板结构有调整，可以在Blazor中获取父容器的引用，传给JS来获取尺寸：

Blazor页面HTML部分 #

@page "/canvas_test1"
@inject IJSRuntime JsRuntime

<!-- 给Canvas包裹一层容器，并获取引用 -->
<div @ref="canvasContainer" style="width:100%;height:100%;">
    <canvas @ref="canvas1"></canvas>
</div>
<button @onclick="SetCanvasSize">Set canvas size</button>

Blazor代码部分 #

ElementReference canvas1;
ElementReference canvasContainer;

async Task SetCanvasSize()
{
    // 同时传递Canvas和父容器引用给JS
    await JsRuntime.InvokeVoidAsync("SetCanvasSize", canvas1, canvasContainer);
}

对应的JavaScript代码 #

function SetCanvasSize(canvasElement, containerElement) {
    const containerWidth = containerElement.clientWidth;
    const containerHeight = containerElement.clientHeight;

    canvasElement.width = containerWidth;
    canvasElement.height = containerHeight;

    const ctx = canvasElement.getContext('2d');
    ctx.strokeRect(0, 0, containerWidth - 1, containerHeight - 1);

    console.log('容器宽度:', containerWidth, '容器高度:', containerHeight);
}

额外优化：监听窗口大小变化 #

如果需要在窗口缩放时自动更新Canvas尺寸，可以在JS中添加resize事件监听：

// 页面加载完成后绑定监听
window.addEventListener('load', () => {
    const canvas = document.querySelector('canvas');
    if (!canvas) return;

    function updateCanvasSize() {
        const mainContent = document.querySelector('main');
        canvas.width = mainContent.clientWidth;
        canvas.height = mainContent.clientHeight;
        // 这里可以重新绘制Canvas内容
    }

    // 初始设置一次
    updateCanvasSize();
    // 窗口缩放时更新
    window.addEventListener('resize', updateCanvasSize);
});

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