直接从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

存在这种变化，它们会将canvas API绑定到Rust并在Rust / WebAssembly中执行操作，但尽管如此，他们将始终使用CanvasRenderingContext2D API在画布上绘制。

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

我想知道是否还有另一种方式：是否可以将画布显示的像素的缓冲区直接绑定到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
    }
  }
}

我是Rust和WebAssembly的初学者。我试图找到一种在性能上考虑画布元素的方法。为了使用Rust和WebAssembly在画布上绘画，我通常会找到示例...

Answer 1

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