HTML5 Canvas绘制和更新

Question

抱歉标题太模糊了，但我不确定如何总结我要问的问题。

首先，这是到目前为止的jsFiddle 。

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

从小提琴中可以看到，我创建了一个矩形类（以便我可以创建尽可能多的正方形，尽管我认为这可能是多余的），并引用它进行绘制。 但是，当我设置height = width ，我总是以非正方形结尾。 我是使用画布的新手，但我认为那是因为正方形的高度和宽度与画布元素的大小有关，因此画布元素的高度和宽度不得成比例（因为它们分配的百分比值与确定像素）。

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

另外，我还有按键事件，以便用户可以使用箭头键移动正方形。 但是，即使我在代码中将上/下键值进行了翻转，它们似乎也被反转了吗？ 左右键什么都不做？

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

如果有人可以检查出这个问题并给我一些有关我做错了什么的指示，那太好了！ 我正在尝试许多新事物，因为这只是一种学习经验，所以如果您有这样的意愿，请帮助我学习！

Answer 1

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

至于运动，看来keyup效果更好。 但是，对于up键， y会减小（top为0 ，bottom为正数）。

我想强调的其他几件事。

使用canvas作为上下文的变量名有点含糊。 画布与其用于绘制的上下文之间有区别。

另外，您声明//browser doesn't support html5如果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"> ，正方形已正确绘制。 我尝试将CS​​S中的width和height从100％更改为500px，但是仍然无法正确绘制正方形。

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