将画布缩放到全屏会降低分辨率

Question

我正在尝试制作全屏游戏来帮助我学习JS。我制作了一个画布项目并使用CSS将其拉伸到屏幕大小。然后我画一个圆圈。我的问题是圈子看起来很糟糕！

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

这是一个jsfiddle示例。 http://jsfiddle.net/H5dHD/152/

我尝试过使用不同的比例因子（所以_draw.scale），但它似乎很重要......

我做错了什么？

P.S。我知道坐标已关闭。我没有为该示例包含该代码。

Answer 1

问题是您使用CSS样式调整了画布的大小，并且不更改实际的宽度和高度。使用CSS样式更改大小时，画布将被拉伸，但内部绘图分辨率保持不变。结果就是画布模糊了。

要更改内部分辨率，请更改画布HTML元素本身的宽度和高度属性。

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

这是你更新的小提琴：

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