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