將畫布縮放至全屏確實會降低分辨率

Question

我正在嘗試製作全屏遊戲以幫助我學習JS。我製作了一個畫布項目，並使用CSS將其拉伸至屏幕大小。然後我畫一個圓圈。我的問題是這個圈子看起來很糟糕！

_draw.arc(20, 20, 10, 0, 2 * Math.PI); 

這裏是一個jsfiddle的例子。 http://jsfiddle.net/H5dHD/152/

我不同的比例係數（所以_draw.scale），但它dosent似乎無關緊要試過......

我在做什麼錯？

P.S.我知道座標是關閉的。我沒有爲這個例子包含代碼。

Answer 1

問題是，您使用CSS樣式調整了畫布大小，並且不改變實際的寬度和高度。當您使用CSS樣式更改大小時，畫布將被拉伸，但內部繪圖分辨率保持不變。結果是畫布模糊。

要更改內部分辨率，請更改畫布HTML元素本身的寬度和高度屬性。

document.getElementById('iDraw').height = screen.availHeight; 
document.getElementById('iDraw').width = screen.availWidth; 

這是你更新的提琴：

http://jsfiddle.net/H5dHD/154/