html画布绘图显示出来

我确信这个问题在我还找不到答案之前就已经被问过。

我想通过在顶部绘制另一个白色矩形来擦除黑色矩形的一部分，但是许多原始黑色矩形显示出来，就像正在平均一样：

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在这里摆弄 http://jsfiddle.net/VdGa6/我想看到的是左侧有一个黑色的 C，旁边有一个几乎白色的矩形。相反，我看到了单个黑色 C、一个灰色反面 C 以及两者之间几乎是白色的线：

起初我以为这是因为盒子根本不是黑色的，相反它看起来是灰色的并且带有一点阿尔法。所以，经过一番谷歌搜索后我发现了这个：为什么 HTML 5 画布中的矩形不是黑色的？ https://stackoverflow.com/questions/10629996/why-isnt-rectangle-black-in-html-5-canvas

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

http://jsfiddle.net/VdGa6/2/ 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);