OFFSCREEN-CANVAS：如何组合两个不同 canvas 中的不同半圆？

Question

我有2个半圆，一个是红色的，另一个是绿色的。我想把它们结合起来，我该怎么做？我正在添加我的 canvas 代码：

const canvas_ok = new OffscreenCanvas(16, 16)
const context_ok = canvas_ok.getContext('2d')
context_ok.arc(8, 8, 8, 0, Math.PI, true)
context_ok.fillStyle = '#56BB08'
context_ok.fill()
const img_ok = context_ok.getImageData(0, 0, 16, 8)
const canvas_err = new OffscreenCanvas(16, 16)
const context_err = canvas_err.getContext('2d')
context_err.arc(8, 8, 8, 0, Math.PI)
context_err.fillStyle = '#FF0000'
context_err.fill()
const img_err = context_err.getImageData(0, 0, 16, 8)

Answer 1

要获得包含两半的单个图像，最简单的方法是使用单个 canvas，然后在 canvas 上绘制两个圆弧，如下所示：

// Create the single canvas and context
const canvas = new OffscreenCanvas(16, 16)
const context = canvas.getContext('2d')

// Green half
context.beginPath()
context.arc(8, 8, 8, 0, Math.PI, true)
context.closePath()
context.fillStyle = '#56BB08'
context.fill()

// Red half
context.beginPath()
context.arc(8, 8, 8, 0, Math.PI, false)
context.closePath()
context.fillStyle = '#FF0000'
context.fill()


// This is just adding the resulting image to the document so the example is visible
canvas
  .convertToBlob()
  .then(blob => {
    var reader = new FileReader()
    reader.onload = (e) => {
      document.write(`<img src="${e.target.result}" />`)
    }
    reader.readAsDataURL(blob)
  })

OFFSCREEN-CANVAS：如何组合两个不同 canvas 中的不同半圆？

OFFSCREEN-CANVAS: How can I combine 2 different half circles that are in different canvas?

html5-canvas

offscreen-canvas