直接从 WebAssembly 操作 canvas 字节

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

有一些变体，他们会将 canvas API 绑定到 Rust 并在 Rust / WebAssembly 中执行操作，但尽管如此，他们总是会使用 CanvasRenderingContext2D API 在 canvas.

上绘制

这当然意味着从 Rust / WebAssembly 到浏览器的 canvas API 到 canvas 显示缓冲区有一个往返，这意味着性能下降。

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

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 主机读取和写入。这是为 canvas 操作创建图像缓冲区的理想方法。

I am wondering if there is another way: Is it possible to bind the buffer for the pixels that the canvas displays directly to Rust and directly manipulate that buffer to change what the canvas shows?

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

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

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

直接从 WebAssembly 操作 canvas 字节

Manipulate canvas bytes directly from WebAssembly

canvas

rust

webassembly