.NET 8 WASM非Blazor项目高效绘制Canvas的技术问题

1. Canvas高效绘制的最优方案 #

对于Wasm游戏引擎的Canvas高速绘制，核心是尽量减少C#与JS的互操作次数，直接操作共享内存缓冲区，结合浏览器原生API批量更新像素：

• 用C#管理像素缓冲区：优先使用byte[]（固定后映射到Wasm内存）或UnmanagedMemoryAllocator分配的非托管内存存储像素数据，避免跨语言内存拷贝。
• 批量传递内存信息到JS：每帧仅向JS传递缓冲区在Wasm内存中的偏移量、宽度、高度，而非逐个像素或分片传递。
• 复用Canvas上下文与ImageData：在JS端缓存getContext('2d')实例，每次更新时直接基于共享内存创建Uint8Array视图，复用ImageData对象（或按需创建但避免频繁销毁），最后调用putImageData一次性绘制。
• 绑定浏览器刷新循环：JS端用requestAnimationFrame驱动绘制逻辑，保证渲染节奏与浏览器刷新同步，避免无效绘制。

2. 正确访问Module.HEAPU8的方法 #

在.NET 8纯Wasm项目中，Module对象并非全局默认暴露，且直接传递IntPtr会因跨语言类型映射问题失效，以下是解决步骤：

步骤1：获取并全局挂载Module对象 #

在项目的index.html中，修改Wasm加载逻辑，在Runtime创建完成后将Module挂载到全局：

<script type="module">
    import { dotnet } from './dotnet.js';
    const runtime = await dotnet.createRuntime();
    // 将Module挂载到window，供后续JS函数访问
    window.WasmModule = runtime.Module;
</script>

步骤2：C#端传递内存偏移量而非IntPtr #

Wasm的内存是线性的，IntPtr的值实际是相对于模块内存起始地址的偏移，C#端需计算这个偏移量传递给JS：

using System.Runtime.InteropServices;
using System.Runtime.CompilerServices;

// 初始化RGBA格式的像素缓冲区
int width = 800;
int height = 600;
byte[] pixelBuffer = new byte[width * height * 4];

// 固定缓冲区，获取内存地址
GCHandle bufferHandle = GCHandle.Alloc(pixelBuffer, GCHandleType.Pinned);
IntPtr bufferPtr = bufferHandle.AddrOfPinnedObject();

// 计算缓冲区在Wasm内存中的偏移量
IntPtr moduleBase = RuntimeHelpers.GetModuleBaseAddress(typeof(Program).Assembly);
int bufferOffset = (int)(bufferPtr - moduleBase);

// 调用JS更新Canvas
await JS.InvokeVoidAsync("renderCanvas", bufferOffset, width, height);

// 释放固定的缓冲区，避免内存泄漏
bufferHandle.Free();

步骤3：JS端通过HEAPU8读取内存 #

在JS函数中，通过全局的WasmModule访问HEAPU8，并基于偏移量创建视图：

// 提前缓存Canvas上下文
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');

function renderCanvas(offset, width, height) {
    const { HEAPU8 } = window.WasmModule;
    // 从Wasm内存中截取对应区域的Uint8Array视图
    const pixelData = new Uint8Array(HEAPU8.buffer, offset, width * height * 4);
    // 创建ImageData并绘制
    const imageData = new ImageData(pixelData, width, height);
    ctx.putImageData(imageData, 0, 0);
}

关键注意事项 #

• 不要直接传递Slice：.NET的Memory<byte>/Span<byte>切片无法直接跨语言传递，必须用「偏移量+长度」的方式替代。
• 内存管理：固定的byte[]必须及时调用GCHandle.Free()释放，非托管内存需对应调用Free()方法。
• 性能优化：若需频繁更新缓冲区，可使用UnmanagedMemory分配内存，避免GCHandle的固定/释放开销。

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