javascript - 如何在 `rot-js` Canvas 上绘制其他形状或线条？

Question

我正在使用rot-js绘制带有六边形的网格，并希望将三 Angular 形和其他形状添加到 canvas 。我尝试过对 display.getContainer() 采取行动但这不起作用。需要做什么才能使其发挥作用？

设置ctx.globalCompositeOperation = "xor" ，我能够看到正在绘制的对象(但颜色都是错误的)。

设置ctx.globalAlpha = .8还允许所有内容在一定程度上可见，所以我认为这与图层有关。

如果我直接在现有的 canvas 上工作元素，绘图效果很好。

Answer 1

很难确定，因为您没有提供任何有关您实际在做什么的信息，但考虑到描述，我猜您不会等待下一帧，然后再对由图书馆。

该库将其所有渲染操作堆叠在 requestAnimationFrame 回调中，因此如果您之前执行此操作，您的绘图将被该库的绘图覆盖。

要解决此问题，只需将您自己的绘图操作包装在 requestAnimationFrame 回调中，它将堆叠在 lib 操作之后，并在顶部绘制。

const display = new ROT.Display();       
const canvas = display.getContainer();
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

// async calls
display.draw(5,  4, "@");
display.draw(15, 4, "%", "#0f0");
display.draw(25, 4, "#", "#f00", "#009");
// end async calls


// this will get covered
ctx.fillStyle = 'red';
ctx.fillRect(20,20,40,40);

// wait next frame
requestAnimationFrame(() => {
  ctx.fillStyle = 'green';
  ctx.fillRect(120,20,40,40);
})

<script src="https://cdn.jsdelivr.net/npm/rot-js"></script>