OFFSCREEN-CANVAS：如何将两个不同画布上的半圆合并为完整图形

你当前的代码已经分别绘制了绿色上半圆和红色下半圆，只需要调整红色半圆的ImageData截取范围，再合并到新画布即可，具体有两种常用实现方式：

方法1：直接绘制源画布到目标画布（最简单高效） #

不需要提取ImageData，直接把两个已有OffscreenCanvas绘制到新的画布上，性能更高，代码也更简洁：

// 新建16x16的目标画布
const mergedCanvas = new OffscreenCanvas(16, 16)
const mergedCtx = mergedCanvas.getContext('2d')

// 绘制绿色上半圆画布
mergedCtx.drawImage(canvas_ok, 0, 0)
// 绘制红色下半圆画布
mergedCtx.drawImage(canvas_err, 0, 0)

// 此时mergedCanvas就是红绿半圆拼成的完整圆形，如果需要导出ImageData可以再调用getImageData
const mergedImg = mergedCtx.getImageData(0, 0, 16, 16)

这种方式不需要手动处理像素，浏览器底层会自动处理透明区域的叠加，上半部分显示绿色、下半部分显示红色，刚好拼成完整圆形。

方法2：合并两个ImageData对象 #

如果你需要直接操作像素数据合并，需要先调整红色半圆的ImageData截取位置，再把两个16x8的ImageData拼接成16x16的完整数据：

// 先修正红色半圆的ImageData截取，从y=8的位置开始截取下半部分8行像素
const img_err = context_err.getImageData(0, 8, 16, 8)

// 新建16x16的ImageData
const mergedImg = new ImageData(16, 16)
// 写入上半部分绿色半圆像素
mergedImg.data.set(img_ok.data, 0)
// 写入下半部分红色半圆像素，偏移量是上半部分的总字节数：16*8*4（每个像素4字节RGBA）
mergedImg.data.set(img_err.data, 16 * 8 * 4)

// 如果需要放到画布渲染，直接putImageData即可
const mergedCanvas = new OffscreenCanvas(16, 16)
const mergedCtx = mergedCanvas.getContext('2d')
mergedCtx.putImageData(mergedImg, 0, 0)

注意事项 #

• 你原始代码里截取img_err时用了getImageData(0, 0, 16, 8)，拿到的是红色画布的上半部分空白区域，需要把第二个参数改成8才能拿到有效红色半圆像素。
• ImageData的data属性是一维Uint8ClampedArray，每个像素占4个连续位置分别对应R、G、B、A四个通道，所以拼接的时候偏移量要按总像素数*4计算。

内容的提问来源于stack exchange，提问作者Ceren Keklik