Question

我正在使用rot-js绘制具有六边形的网格，并想向canvas添加三角形和其他形状。我曾尝试对display.getContainer()采取行动，但这没有用。要使它正常工作需要做什么？

设置ctx.globalCompositeOperation = "xor"，可以看到正在绘制的对象（但是颜色都是错误的）。

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

如果我直接处理现有的canvas元素，则绘图效果很好。

Answer 1

由于您没有提供任何有关实际操作的信息，因此很难确定，但鉴于描述，我想您可能不会等待下一帧，而是先对自己的图纸进行绘制。库。

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

要解决此问题，只需将您自己的绘图操作包装在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>

如何在“ rot-js”画布上绘制其他形状或线条？

1 个答案: