将画布缩放至全屏确实会降低分辨率

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/