HTML5画布绘制和更新

对不起，标题是多么模糊，但我不完全确定如何总结我想要问的东西。HTML5画布绘制和更新

首先，这里是什么，我至今一jsFiddle。

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

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

我可以用正方形的大小设置为像素解决这个问题，但后来当我叫按键事件，方完全不动。

此外，我有keypress事件，以便用户可以用箭头键移动广场。然而，即使当我在代码中翻转它们时，上/下键值似乎也被反转了。左/右键不做任何事情？

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

如果有人可以检查一下，并给我一些关于我做错了什么的指针，那会很棒！我尝试了很多新东西，因为它只是一个学习体验，所以如果你觉得如此倾向，请帮助我学习！

来源

2011-07-28 Jordan Foreman

您经历了一次调整画布大小时经常出错的问题 - 尝试使用CSS。使用CSS进行画布绘制会缩放 - 不会改变分辨率。要设置分辨率，请使用HTML中的width=和height=属性。

至于运动，似乎keyup工作得更好。但是，对于up密钥，y会减少（顶部是0，底部是正数）。

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

使用canvas作为上下文中的变量名是有点暧昧。画布和用于绘画的上下文有所不同。

此外，如果ctx不存在，则表示//browser doesn't support html5。但是，如果浏览器不支持canvas/HTML5，那么.getContext('2d')函数调用将会失败，因为在这种情况下它不是函数。您的else语句只会在功能存在但不返回任何内容时才会执行。这可能永远不会是这样。

空else循环是不是很有用下去，但不伤害:)

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

来源

2011-07-28 15:47:36 pimvdb

'else'语句甚至不需要在那里，因为放置在开始和结束'canvas'标记内的内容是不支持'canvas'时显示的内容。 –

谢谢！这是完美的作品，虽然我不是使用'.keyup'的巨大粉丝，因为用户必须反复按下按键来移动正方形，而不是能够按住键... –

@Jordan Foreman ：请看看http://jsfiddle.net/DqrEm/6/。通过设置标志并运行间隔，您可以获得流畅的动画。同时按键也可以这样。 – pimvdb

你的问题是不是与你的平方大小，但如何调整您canvas。在你的jsfiddle中，当我将canvas起始行改为<canvas id="practice" width="500" height="500">时，广场被正确绘制。我尝试将CSS中的width和height从100％更改为500px，但仍然错误地绘制了正方形。

更新：设置width和height到100％，在实际canvas标签（即<canvas id="practice" width="100%" height="100%">）工作过。

来源

2011-07-28 15:46:42

让我试试吧...当我开始阅读关于canvas元素，宽度和高度总是在元素标签内声明，但不是该方法无效的标记？ –

通常是的，但我相信它可以用于“画布”。 –

我想我没有考虑过......谢谢！ –

HTML5画布绘制和更新

回答

相关问题