Javascript弹跳球 - 视口在加载时自动调整动画画布的大小？答案

【问题标题】：Javascript bouncing ball - viewport to automatically resize animation canvas on load?Javascript弹跳球 - 视口在加载时自动调整动画画布的大小？
【发布时间】：2015-08-14 22:06:49
【问题描述】：

我希望在响应式画布中有一个 javascript 弹跳球。

我的目标是让动画画布与其加载的视口大小相同，而不是固定大小的画布（目前为 1366x768）。

问题是，如果有人在移动设备上以 320 像素的视口加载页面，他们会错过部分动画及其唯一用途。

到目前为止，通过反复试验，我得到了这个脚本：

<script>
var context;
var x=100;
var y=200;
var dx=5;
var dy=5;

function init()
{
    context= myCanvas.getContext('2d');
    setInterval(draw,10);
}

function draw()
{
    context.clearRect(0,0,1366,768);
    context.beginPath();
    context.fillStyle="#fedc00";
    // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
    context.arc(x,y,16,0,Math.PI*2,true);
    context.closePath();
    context.fill();
    // Boundary Logic
    if( x<0 || x>1366) dx=-dx; 
    if( y<0 || y>768) dy=-dy; 
    x+=dx; 
    y+=dy;
}
</script>

和 HTML

<body onLoad="init();">

<div class="canvas">
    <canvas id="myCanvas" width="1366" height="768">
    </canvas>
</div>

我想知道这是否需要在 javascript 中完成，或者脚本是否应该根本不提及画布大小（应该是视口的 100% 宽度/高度）并使用 CSS 中的媒体查询来解决它?

能否请您指点一下我需要从脚本中添加/删除哪些内容才能使其正常工作？

提前致谢！

【问题讨论】：

标签： javascript css html animation

【解决方案1】：

我在这部分看到您使用的是固定参数：

// Boundary Logic
if( x<0 || x>1366) dx=-dx; 
if( y<0 || y>768) dy=-dy;

您将球的距离拉长，超出了手机屏幕的大小。您应该使这些值动态化。

window.innerWidth  //instead of 1366
window.innerHeigth //instead of 768

如果您在浏览器窗口缩小到例如 500 像素宽的情况下刷新页面，球现在应该会在到达窗口右侧时反弹。

无论如何，这还没有结束，我们必须添加一个偏移量，即球的直径，因为您希望它看起来像在弹跳。

让我知道以上是否有效，我们稍后会看到调整。

【讨论】：

您好胡安，谢谢您的回复。球现在在较小的窗口尺寸 (320,480) 的窗口右侧反弹，但随后消失。在 640 或更高的宽度上，球只是从屏幕上掉下来，再也看不到了。根据上面的代码，我仍在其他两个地方使用值 1366、768 - 一次在脚本上，另一次在 html 上。如何让球在浏览器窗口的顶部/底部和侧面的任何窗口大小上反弹？
通过使用原始脚本并将其添加到我的 CSS 中，设法让球在所有视口的边缘反弹：#myCanvas { width: 100%;高度：110%；显示：块；溢出：隐藏；现在的问题是，由于视口没有相同的图像比例，所以球会被扭曲/挤压/调整大小……想一想是否有办法让球的比例不受视口比例的影响？
你能用你所有的 CSS 更新这个问题吗？
.wrapper { 宽度：100%;位置：相对；填充顶部：5.5em；背景颜色：#F9F9F9； } .canvas { 宽度：100%;高度：100%； z 指数：100；位置：绝对；文本对齐：居中；顶部：0px；左：0px；溢出：隐藏；背景颜色：透明； } #myCanvas { 宽度：100%;高度：110%；显示：块；溢出：隐藏； }