javascript - 为什么在同一位置写入两次时写入 Canvas 的文本会变暗？

Question

当文本多次写入同一位置时，它会变暗。为什么？

var txt = "The cat is on the mat";
var ctx = c.getContext("2d");   
ctx.font = "15px Lucida Sans Unicode";
ctx.fillText(txt,10,50);
ctx.fillText(txt,10,50);     // again
ctx.fillText(txt,10,100);

Answer 1

文本的边缘是消除锯齿的，这意味着它们与背景混合在一起。当您将文本放在更多文本之上时，它会与后面文本的抗锯齿边缘混合，使其看起来有锯齿且更大(因此更暗)。想想两 block 烟熏玻璃放在彼此面前。