0

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

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

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

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

我究竟做错了什么？

PS我知道坐标是关闭的。我没有在示例中包含该代码。

4

1 回答 1

1

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

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

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

这是您更新的小提琴：

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

于 2013-11-01T17:47:28.833 回答