很抱歉标题有多模糊，但我不完全确定如何总结我正在尝试的问题。
首先，这是我目前所拥有的jsFiddle。
我刚开始学习使用HTML5 canvas元素，以及使用js OOP。
正如你从小提琴中看到的那样，我创建了一个矩形类（这样我可以创建尽可能多的正方形，虽然我认为这可能是多余的），并引用它来绘制。但是，当我设置height = width时，我总是以非正方形结束。我对使用画布相对较新，但我认为这是因为正方形的高度和宽度是相对于canvas元素的大小，因此canvas元素的高度和宽度必须不成比例（因为它们的指定百分比值是相对的确定像素。）
我可以通过将方块的大小设置为像素来解决这个问题，但是当调用我的按键事件时，方块根本不会移动。
另外，我有按键事件，以便用户可以使用箭头键移动方块。但是，即使我在代码中翻转它们，上/下键值似乎也会被反转？左/右键什么都不做？
而且，我也只能让广场上下移动一次？只要用户不断按下相应的按钮，我的代码是否应该允许我增加x / y值？
如果有人能够检查出来并给我一些关于我做错的指示，那就太好了！我正在尝试很多新东西，因为它只是一种学习经历，所以如果你有这种倾向，请帮助我学习！
答案 0 :(得分：5)
你经历过一个经常出现问题的事情，即调整画布大小 - 尝试使用CSS。使用CSS进行画布绘制将缩放它 - 而不是更改分辨率。要设置分辨率，请使用HTML中的width=和height=属性。
至于动作，似乎keyup效果更好。但是，对于up键，y会减少（顶部为0，底部为正值）。
我想强调的其他一些事情。
使用canvas作为上下文的变量名称有点含糊不清。画布与用于绘图的上下文之间存在差异。
另外，如果//browser doesn't support html5不存在，则说明ctx。但是，如果浏览器不支持canvas / HTML5，则.getContext('2d')函数调用将失败，因为在这种情况下它不是函数。只有当函数 存在但未返回某些内容时，才会执行else语句。那可能永远不会是这样。
空else循环也不是很有用，但这不会有害：）
答案 1 :(得分：2)
您的问题不在于您的方块大小，而在于您canvas的大小。在你的jsfiddle中，当我将canvas起始行更改为<canvas id="practice" width="500" height="500">时，正确绘制了正方形。我尝试将CSS中的width和height从100％更改为500px，但仍然无法正确绘制正方形。
更新：在实际的width代码中设置height和canvas为100％（即<canvas id="practice" width="100%" height="100%">）也可以。