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

Question

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

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

這是一個jsfiddle示例。 http://jsfiddle.net/H5dHD/152/

我嘗試使用不同的比例因子（所以_draw.scale），但這似乎很重要...

我究竟做錯了什么？

附言：我知道坐標已關閉。 我沒有在示例中包含該代碼。

Answer 1

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

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

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

這是您更新的小提琴：

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