直接从 WebAssembly 操作画布字节

Question

我是 Rust 和 WebAssembly 的初学者。我试图找到一种方法来利用canvas元素并考虑到性能。

为了使用 Rust 和 WebAssembly 绘制canvas，我通常会找到一些示例，在这些示例中，他们将使用浏览器的CanvasRenderingContext2D界面并在其上绘制他们将从 WASM 接收的数据

。

const canvasContext = canvasElement.getContext("2d");
const canvasImageData = canvasContext.createImageData(width, height);
const imageDataArray = getWasmImageDataArray()
canvasImageData.data.set(imageDataArray);
canvasContext.clearRect(0, 0, width, height);
canvasContext.putImageData(canvasImageData, 0, 0);

来源： https://wasmbyexample.dev/examples/reading-and-writing-graphics/reading-and-writing-graphics.rust.en-us.html

有一些变体，他们将canvasAPI绑定到Rust并在Rust/WebAssembly中执行操作，但是，他们总是使用CanvasRenderingContext2DAPI在画布上绘制。

这当然意味着从 Rust/WebAssembly 通过浏览器的canvasAPI 到画布显示缓冲区的往返，这意味着性能下降。

我想知道是否有另一种方法：是否可以将画布显示的像素缓冲区直接绑定到 Rust 并直接操作该缓冲区以更改画布显示的内容？有点像这样(伪代码(

Rust伪代码：

// Makes whole canvas black
drawOnCanvasDisplayBuffer(displayBuffer) {
for(i = 0; i < displayBuffer.width; i++) {
for(j = 0; j < displayBuffer.height; j++) {
displayBuffer[i][j] = COLOR_BLACK
}
}
}

Answer 1

WebAssembly 的 I/O 功能非常有限。它与主机环境(通常是浏览器(交互的唯一方法是直接通过导入/导出的功能或通过线性内存间接交互。

你引用的例子有一个 WebAssembly 模块，其中它的线性内存与主机共享，允许 WebAssembly 模块和 JavaScript 主机读取和写入它。这是为画布操作创建图像缓冲区的理想方法。

我想知道是否有另一种方法：是否可以将画布显示的像素缓冲区直接绑定到 Rust 并直接操作该缓冲区以更改画布显示的内容？

不，不是。共享内存实例的类型必须是 WebAssembly.Memory，它不能是任意缓冲区。

请注意，在示例代码中，不需要clearRect操作：

canvasContext.clearRect(0, 0, width, height); // ***
canvasContext.putImageData(canvasImageData, 0, 0)