Javascript彈跳球 - 視窗自動調整負載上的動畫畫布大小？

我期待在響應式畫布中有一個JavaScript彈跳球。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>

和HTML

<body onLoad="init();"> 

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

我想知道，如果這需要做在JavaScript或如果腳本應該只是沒有提及畫布的大小（應該是視口的100％寬度/高度），並在CSS中使用媒體查詢來解決它？

你可以給我一些指示，我需要添加/刪除腳本，使其工作？

在此先感謝！

來源

2015-08-14 Amble

我看到你正在使用的固定參數這一部分：

// 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像素寬的瀏覽器窗口，球現在應該當它到達窗口的右側反彈。

無論如何，這不會在這裏結束，我們必須添加一個偏移量，這是球的直徑，因爲您希望它看起來像彈跳。

讓我知道如果上述工作，我們會看到稍後的調整。

來源

2015-08-14 22:48:16

嗨娟，謝謝你的回覆。現在球在較小窗口大小（320,480）的窗口右側彈跳，但隨後消失。寬度爲640或更高時，球剛落下，永不會再被看到。我仍然在其他兩個地方使用值1366,768，如上面的代碼 - 一次在腳本上，另一次在html上。我怎樣才能讓球在瀏覽器窗口的頂部/底部和側面的任何窗口大小上反彈？ – Amble

通過使用原始腳本並將其添加到我的CSS中，從而使球彈跳在所有視口的邊緣上： #myCanvas { \t width：100％; \t身高：110％; \t display：block; \t溢出：隱藏; } 問題現在是因爲視口不具有相同的圖像比率球變形/吱吱聲/調整大小... 思考是否有辦法讓球的比例不受視口比率的影響？ – Amble

你可以用你擁有的所有CSS來更新這個問題嗎？ –

Javascript彈跳球 - 視窗自動調整負載上的動畫畫布大小？

回答

相關問題