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

Question

我希望在响应式画布中有一个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中使用媒体查询来解决？

您能否给我一些有关我需要从脚本中添加/删除使其正常工作的指针？

提前致谢！

Answer 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像素宽的情况下刷新页面，则该球到达窗口右侧时应该会反弹。

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

让我知道以上方法是否有效，稍后我们将进行调整。

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

问题描述

1 个解决方案

解决方案1
0 2015-08-14 22:48:16

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

问题描述

1 个解决方案

解决方案1 0 2015-08-14 22:48:16

解决方案1
0 2015-08-14 22:48:16