我在chrome和Firefox中都观察到HTML画布的奇怪行为。由于某种原因，当我在剪裁后的不同颜色的较小的矩形上填充矩形时，会有一个像素宽的色差线。

以下是JS fiddle代码片段:https://jsfiddle.net/srkgbxw1/7/

var my_canvas = document.getElementById('canvas'),
    context = my_canvas.getContext("2d");

context.translate(0.5, 0.5)

context.fillStyle = "orange";
context.fillRect(10,10,100,100);

context.beginPath();
context.rect(20,20,90,90);
context.clip();

context.fillStyle = "white";
context.fillRect(0,0,110,110);

context.fillStyle = "orange";
context.fillRect(0,0,190,190);

结果如下：

请帮我弄清楚第三次用橙色填充后线条苍白的原因是什么？

upd:在我被指出在第一版中犯了一个愚蠢的错误后，最初的问题发生了变化

UPD2我得到了答案，这是由于在裁剪区域边缘进行颜色插值，因为上下文被翻译为半个像素，这是为了得到细线（推荐的技术）。为了避免插值，裁剪区域也应该调整半个像素，然后苍白的线条消失。

顺晟科技：

如果查看日志:

var my_canvas = document.getElementById('canvas'),
    context = my_canvas.getContext("2d");

context.translate(0.5, 0.5)

context.fillStyle = "orange";
context.fillRect(10,10,100,100);

context.beginPath();
context.rect(20,20,90,90);
context.clip();

context.fillStyle = "white";
context.fillRect(0,0,110,110);

context.fillStyle = "orange";
context.fillRect(0,0,190,190);

因此，当您注释它时，它之后的所有内容都将执行，而当您取消注释它时，它将失败，该行之后的所有内容都将不执行。

编辑：第二个问题:

这个问题相当于为什么蓝色方块不能完全重叠红色方块:

var my_canvas = document.getElementById('canvas'),
    context = my_canvas.getContext("2d");

context.translate(0.5, 0.5)

context.fillStyle = "orange";
context.fillRect(10,10,100,100);

context.beginPath();
context.rect(20,20,90,90);
context.clip();

context.fillStyle = "white";
context.fillRect(0,0,110,110);

context.fillStyle = "orange";
context.fillRect(0,0,190,190);

由于翻译，您现在正在绘制浮动像素，所有内容都移动了半个像素。 我建议您阅读这篇文章，了解如何处理它的更多信息： fillrect()float numbers被使用时不完全重叠

移除可移除“色泽线”。