javascript - HTML5 Canvas 绘制和更新

Question

很抱歉标题如此模糊，但我不完全确定如何总结我想问的问题。

首先，这是一个 jsFiddle到目前为止我所拥有的。

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

正如您从 fiddle 中看到的，我创建了一个矩形类(以便我可以创建尽可能多的正方形，尽管我认为这可能是多余的)，并引用它来绘制。然而，当我设置高度=宽度时，我总是得到一个非正方形。我对使用 Canvas 相对较新，但我认为这是因为正方形的高度和宽度是相对于 Canvas 元素的大小的，因此 Canvas 元素的高度和宽度一定不成比例(因为它们指定的百分比值相反)到确定的像素)。

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

此外，我还有按键事件，以便用户可以使用箭头键移动方 block 。但是，即使我在代码中翻转向上/向下键的值，它们似乎也是颠倒的？左/右键没有任何作用？

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

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

Answer 1

您在调整 Canvas 大小时遇到​​过经常出错的情况 - 尝试使用 CSS。使用 CSS 进行 Canvas 绘制将对其进行缩放 - 不会改变分辨率。要设置分辨率，请使用 HTML 中的 width= 和 height= 属性。

至于 Action ，似乎keyup效果更好。但是，对于 up 键，y 会递减(顶部为 0，底部为正值)。

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

使用canvas作为上下文的变量名有点含糊。 Canvas 与其用于绘图的上下文之间存在差异。

此外，如果 ctx 不存在，则声明 //browser does not support html5。但是，如果浏览器不支持 canvas/HTML5，则 .getContext('2d') 函数调用将会失败，因为在这种情况下它不是函数。仅当函数确实存在但不返回任何内容时，您的else语句才会被执行。情况可能永远不会如此。

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

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