如何在保持坐标比例的同时调整画布及其背景图像的大小?

时间:2016-01-16 16:18:10

标签: html html5 canvas

我希望我的画布和背景图像可以扩展到任何浏览器大小,我可以通过这种方式学习。

<canvas id="canvas" style="width:100%; height:100%;
background-size:100% 100%; left:0px; top: 0px;"> 

使用百分比设置宽度和高度会导致我在顶部绘制的任何内容都变得模糊。 我读到这个的原因是它出来模糊,因为使用css设置的画布的宽度和高度是不同的。

因为我使用图像的原始尺寸编写了碰撞检测逻辑,所以我必须跟踪坐标。

是否可以动态更改画布大小以填充屏幕,重新绘制并确保碰撞逻辑完美地工作而不会在顶部模糊绘制?

让我们举一个例子。我想要作为画布背景的图像floor.jpg是1200X700。我希望画布是页面宽度和高度的100%。我在其上移动的动画播放器需要使用墙壁进行碰撞检测,我编码时要记住1200x700图像。

我在这个网站上经历了各种类似的问题,但似乎无法弄明白。

0 个答案:

没有答案