很抱歉标题有多模糊,但我不完全确定如何总结我正在尝试的问题。
首先,这是我目前所拥有的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%">
)也可以。