canvas - 直接从 WebAssembly 操作 Canvas 字节

Question

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

绘制 canvas使用 Rust 和 WebAssembly 我通常会找到他们会使用浏览器的 CanvasRenderingContext2D 的示例接口(interface)并在其上绘制数据，他们将从 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

有一些变体，它们将绑定(bind) canvas API 到 Rust 并在 Rust/WebAssembly 中执行操作，但尽管如此，他们总是使用 CanvasRenderingContext2D在 Canvas 上绘制的 API。

这当然意味着 Rust/WebAssembly 通过浏览器的 canvas 进行往返。 API 进入 Canvas 显示缓冲区，这意味着性能下降。

我想知道是否还有另一种方法:是否可以将 Canvas 直接显示的像素的缓冲区绑定(bind)到 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)