HTML5 Canvas 绘制和更新

Question

抱歉标题含糊不清，但我不完全确定如何总结我要问的内容。

首先，这是我目前所拥有的jsFiddle。

我刚刚开始学习使用 HTML5 画布元素，以及使用 js OOP。

正如您从小提琴中看到的那样，我创建了一个矩形类（这样我就可以创建尽可能多的正方形，尽管我认为这可能是多余的），并引用它来绘制。但是，当我设置height = width 时，我总是以非正方形结束。我对使用画布比较陌生，但我认为这是因为正方形的高度和宽度与画布元素的大小相关，因此画布元素的高度和宽度不能成比例（因为它们分配的百分比值相反到确定的像素）。

我可以通过将正方形的大小设置为像素来解决这个问题，但是当我的按键事件被调用时，正方形根本不会移动。

另外，我有 keypress 事件，以便用户可以使用箭头键移动方块。但是，向上/向下键的值似乎是反转的，即使我在代码中翻转它们？而且左/右键什么都不做？

而且，我也只能让方格上下移动一次？只要用户不断按下相应的按钮，我的代码不应该允许我增加 x/y 值吗？

如果有人可以检查一下并给我一些关于我做错了什么的指示，那就太好了！我正在尝试很多新的东西，因为它只是一种学习体验，所以如果你有这种倾向，请帮助我学习！

Answer 1

您遇到了在调整画布大小时经常出错的事情 - 尝试使用 CSS。使用 CSS 进行画布绘图将缩放它 - 不改变分辨率。要设置分辨率，请使用 HTML 中的width= 和height= 属性。

至于动作，似乎keyup 效果更好。但是，对于 up 键，y 会递减（顶部是 0，底部是正值）。

我想强调一些其他的事情。

使用canvas 作为上下文的变量名有点模棱两可。画布与其用于绘图的上下文之间存在差异。

另外，如果ctx 不存在，你声明//browser doesn't support html5。但是，如果浏览器不支持 canvas/HTML5，.getContext('2d') 函数调用将会失败，因为在这种情况下它不是一个函数。您的 else 语句只有在函数 确实 存在但不返回某些内容时才会被执行。可能永远不会是这样。

空的else 循环也不是很有用，但这并没有什么坏处:)

http://jsfiddle.net/DqrEm/4/

Answer 2

您的问题不在于正方形的大小，而在于您如何调整 canvas 的大小。在您的 jsfiddle 中，当我将 canvas 起始行更改为 <canvas id="practice" width="500" height="500"> 时，正方形已正确绘制。我尝试将 CSS 中的 width 和 height 从 100% 更改为 500px，但正方形仍然绘制不正确。

更新：在实际的canvas 标签（即<canvas id="practice" width="100%" height="100%">）中将width 和height 设置为100% 也可以。