Javascript Canvas绘图乱序？

Question

我正在尝试在矩形上绘制一些文本，但是文本出于某种原因在矩形之前绘制。当我使用其他形状（例如弧形）并且在Chromium和Firefox中都出现时，这似乎不会发生，所以我不认为它是浏览器问题，这是我的代码：

map_context.fillStyle = "#95609F";
map_context.rect(32,32,192,192);
map_context.fill();

map_context.fillStyle = "white";
map_context.fillText("+", 128, 128);

Answer 1

尝试替换这两行：

map_context.rect(32,32,192,192);
map_context.fill();

只是：

map_context.fillRect(32,32,192,192);

您可能在循环中运行相同的代码来绘制多个图像，但每次都忘记清除路径。对于路径（例如rect（）添加到），您需要使用beginPath()，因此可选的方法是：

map_context.beginPath();
map_context.rect(32,32,192,192);
map_context.fill();