2

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

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

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

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

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

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

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

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

4

2 回答 2

5

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

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

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

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

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

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

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

于 2011-07-28T15:47:36.083 回答
2

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

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

于 2011-07-28T15:46:42.870 回答