將 canvas 像素從 2D 上下文復制到另一個 - Javascript

Question

在 javascript 中，我正在將音頻緩沖區寫入 canvas 以進行頻譜可視化。 我目前正在處理音頻信號並粘貼在 canvas 的 2D 上下文中。 我想制作與 OpenGL GL_CLAMP_TO_EDGE 類似的效果，復制一條垂直像素線（右側最后一條）並將其擴展為另一個 2d 上下文中的線。

function init() {
  copyvals();
  requestAnimationFrame(init);
}
requestAnimationFrame(init);

var ctx = spectrocanvas.getContext("2d");
var imageData = ctx.getImageData(spectrocanvas.width-1, 0, 1, spectrocanvas.height);
var data = imageData.data;
var _ctx = othercanvas.getContext("2d");
_ctx.putImageData(imageData, 0, 0);

最好的方法是什么？ 有很多 ctx.strokestyle？ 提前致謝

效果示例：

Answer 1

WebGL (1.0)基於OpenGL ES 2.0 API 。

在 OpenGL ES 2.0 和 WebGL 1.0 中， CLAMP_TO_EDGE是紋理參數TEXTURE_WRAP_S和TEXTURE_WRAP_T的有效參數。

例如：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);