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

起初我還以爲這是因爲盒子不黑可言，相反，它看起來灰並帶有一點阿爾法。所以，一些谷歌搜索後，我發現這一點：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);