HTML画布绘制穿透显示

Question

HTML画布绘制穿透显示

3

我相信这个问题以前已经被问过了，但我还没有找到答案。

我想通过在上面绘制另一个白色矩形来擦除黑色矩形的一部分，但很多原始的黑色矩形透过来，就像被平均了一样：

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);

我希望看到的是在左侧一个单一黑色的 C，旁边是几乎白色的矩形。但现在我看到的是一个单一的黑色 C，一个灰色反向的 C 和两者之间的几乎白色线条。 js fiddle 在这里。

- AJP

真正的白色不是 rgba(255,255,255,1) 吗？ - Jan Hommes

是的，@JanHommes，你说得对，但为了回答问题，我不得不选择一些可见的东西，因此选择了“几乎白色”和rgba(250,250,250,1) :) - AJP

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonas Grumann · Accepted Answer

起初我以为这是因为盒子根本不是黑色的，相反看起来更像灰色，还有一点alpha。所以，在搜索一番后，我找到了这个：为什么在HTML 5画布中矩形不是黑色？基本上，你用一个1像素宽的边框在一个圆的像素数上绘制矩形，这意味着浏览器试图在半个像素上进行绘制。你应该将位置设置为某些.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);