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

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

javascript css html animation

Javascript弹跳球-加载时自动调整动画画布大小的视口？,javascript,css,html,animation,Javascript,Css,Html,Animation,我希望有一个javascript弹跳球在一个响应画布我的目标是使动画画布与加载的视口大小相同，而不是具有固定大小的画布（当前为1366x768）问题是，如果有人在移动设备上加载带有320px视口的页面，他们将错过部分动画及其唯一用途到目前为止，通过反复试验，我得到了以下脚本： <script> var context; var x=100; var y=200; var dx=5; var dy=5; function init() { context= myCanv

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

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

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

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

<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>


var语境；
var x=100；
变量y=200；
var-dx=5；
var-dy=5；
函数init（）
{
context=myCanvas.getContext（'2d'）；
设置间隔（抽签，10）；
}
函数绘图（）
{
clearRect（0,01366768）；
context.beginPath（）；
context.fillStyle=“#fedc00”；
//在画布上的坐标100100处绘制半径为20的圆
弧（x，y，16,0，Math.PI*2，true）；
closePath（）；
context.fill（）；
//边界逻辑
如果（x1366）dx=-dx；
如果（y768）dy=-dy；
x+=dx；
y+=dy；
}

和HTML

<body onLoad="init();">

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

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

你能给我一些建议，我需要从脚本中添加/删除什么才能使它工作吗

提前谢谢

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

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

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

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

请告诉我以上是否有效，我们将在稍后看到调整。

嗨，胡安，谢谢你的回复。球现在在较小的窗口大小（320480）的窗口右侧反弹，但随后消失。在640宽或更高的屏幕上，球只是从屏幕上掉下来，再也看不见了。根据上面的代码，我还在另外两个地方使用1366768值——一次在脚本上，另一次在html上。如何使球在任何大小的窗口（包括浏览器窗口的顶部/底部和侧面）上反弹？通过使用原始脚本并将其添加到CSS中，使球在所有视口的边缘上反弹：#myCanvas{宽度：100%；高度：110%；显示：块；溢出：隐藏；}现在的问题是，由于视口没有相同的图像比率，球会被扭曲/挤压/调整大小。。。思考是否有办法保持球的比例不受视口比例的影响？你能用你所有的CSS更新问题吗？.wrapper{width:100%；position:relative；padding top:5.5em；background color:#F9F9F9；}.canvas{宽度：100%；高度：100%；z索引：100；位置：绝对；文本对齐：中心；顶部：0px；左侧：0px；溢出：隐藏；背景色：透明；}myCanvas{宽度：100%；高度：110%；显示：块；溢出：隐藏；}

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