javascript - html Canvas 绘图显示通过

Question

我确定在我还找不到答案之前已经有人问过这个问题。

我想通过在顶部绘制另一个白色矩形来删除黑色矩形的一部分，但是很多原始黑色矩形显示出来，就好像它们正在被平均一样:

canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.globalAlpha = 1;
context.globalCompositeOperation = 'source-over';
context.strokeStyle = 'rgba(0,0,0,1)';
context.strokeRect(10,20,20,30);
context.strokeStyle = 'rgba(250,250,250,1)';
context.strokeRect(20,20,10,30);

js fiddle here我想看到的是左边有一个黑色的 C，旁边有一个几乎是白色的矩形。相反，我看到了一个黑色的 C，一个灰色的反面 C 和两者之间几乎是白色的线:

Answer 1

起初我以为是因为盒子根本不是黑色的，相反它看起来是灰色的并且有一点 alpha。所以，经过一番谷歌搜索后，我发现了这个:Why isn't rectangle black in HTML 5 canvas?

基本上，您在圆形像素数上绘制带有 1px 宽边框的矩形，这意味着浏览器尝试在半像素上绘制。您应该将位置设置为 .5 以避免此问题:

http://jsfiddle.net/VdGa6/2/

canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
// context.globalAlpha = 1;  // this is the default so it's not needed
// context.globalCompositeOperation = 'source-over';  // this is the default so it's not needed
context.strokeStyle = 'rgba(0,0,0,1)';
context.strokeRect(10.5,20.5,20,30);
context.strokeStyle = 'rgba(250,250,250,1)';
context.strokeRect(20.5,20.5,10,30);