使用HTML 5畫布自動滾動

我遇到與HTML 5畫布動畫相關的問題。
我剛纔寫這整個代碼，它的作用是一個盒子不斷向下移動，並超過該網頁由於其滾動選項來的高度，因爲這個我需要向下滾動，看看那裏是框。
所以我的問題是：是否有任何方法，當箱子向下移動時，它自動幫助用戶僅通過該動畫向下滾動？箱子向下移動時的含義也向下滾動，幫助用戶顯示箱子正在移動的位置。如果涉及到背景，那麼它會在那裏，它只是一個樣本。使用HTML 5畫布自動滾動

小提琴在這裏： http://jsfiddle.net/gamealchemist/MLHQK/ 我試過使用背景滾動，但也沒有工作......！

的代碼是：

CSS

body { 
    margin: 0px; 
    padding: 0px; 
    }

HTML

<canvas id="myCanvas" width="578" height="1000"></canvas>

的JavaScript

window.requestAnimFrame = (function (callback) { 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { 
     window.setTimeout(callback, 1000/60); 
    }; 
})(); 

function drawRectangle(myRectangle, context) { 
    context.beginPath(); 
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); 
    context.fillStyle = '#8ED6FF'; 
    context.fill(); 
    context.lineWidth = myRectangle.borderWidth; 
    context.strokeStyle = 'black'; 
    context.stroke(); 
} 

function animate(myRectangle, canvas, context, startTime) { 
    // update 
    var time = Date.now() - startTime; 

    // pixels/second^2 
    var gravity = 200; 

    myRectangle.y = 0.5 * gravity * Math.pow(time/1000, 2); 

    if (myRectangle.y > canvas.height - myRectangle.height - myRectangle.borderWidth/2) { 
     myRectangle.y = canvas.height - myRectangle.height - myRectangle.borderWidth/2; 
    } 
    lastTime = time; 

    // clear 
    context.clearRect(0, 0, canvas.width, canvas.height); 

    // draw 
    drawRectangle(myRectangle, context); 

    // request new frame 
    requestAnimFrame(function() { 
     animate(myRectangle, canvas, context, startTime); 
    }); 
} 
var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 

var myRectangle = { 
    x: 239, 
    y: 0, 
    width: 100, 
    height: 50, 
    borderWidth: 5 
}; 

drawRectangle(myRectangle, context); 

// wait one second before dropping rectangle 
setTimeout(function() { 
    var startTime = (new Date()).getTime(); 
    animate(myRectangle, canvas, context, startTime); 
}, 2000);

來源

2014-05-14 Shashank

使用window.innerHeight並滾動（翻譯）您的上下文以使您可以看到您的正方形的畫布會更合乎邏輯。但是你必須添加某種背景，以便我們可以看到廣場正在移動。我從你的代碼做了一個小提琴：jsfiddle.net/gamealchemist/MLHQK – GameAlchemist

那麼它確定以後我會添加一些背景......但我仍然無法做到這一點。我剛看到你的小提琴，但仍然沒有滾動。：| – Shashank

小提琴只是在這裏幫助你和S.O.人們瞭解問題/提出解決方案。將這樣的小提琴加入一個帖子是一種很好的做法。事實上，用空背景「滾動」是沒有意義的。你必須做很多工作才能獲得背景+一些實體+相機管理工作。對我來說，你的問題雖然很有趣，但離解決方案還很遙遠，無法成爲有效的S.O.問題，我建議你刪除它或S.O.人們認爲它太寬泛。 – GameAlchemist

添加以下內容到動畫個功能可以解決這個問題

delay = 100; 
// scroll 
if(myRectangle.y - delay > 0) 
    window.scrollTo(0, myRectangle.y - delay);

這是我從您的代碼，在那裏我還添加了背景圖像做出了表率，所以你可以看到箱子正常移動。

<!DOCTYPE html> 
<html> 
<head> 
<script> 
    window.requestAnimFrame = (function (callback) { 
     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { 
      window.setTimeout(callback, 1000/60); 
     }; 
    })(); 

    function drawRectangle(myRectangle, context) { 
     context.beginPath(); 
     context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); 
     context.fillStyle = '#8ED6FF'; 
     context.fill(); 
     context.lineWidth = myRectangle.borderWidth; 
     context.strokeStyle = 'black'; 
     context.stroke(); 
    } 

    function animate(myRectangle, canvas, context, startTime) { 
     // update 
     var time = Date.now() - startTime; 

     // pixels/second^2 
     var gravity = 200; 

     myRectangle.y = 0.5 * gravity * Math.pow(time/1000, 2); 

     if (myRectangle.y > canvas.height - myRectangle.height - myRectangle.borderWidth/2) { 
      myRectangle.y = canvas.height - myRectangle.height - myRectangle.borderWidth/2; 
     } 
     lastTime = time; 

     // clear 
     context.clearRect(0, 0, canvas.width, canvas.height); 

     // draw 
     drawRectangle(myRectangle, context); 

     delay = 100; 
     // scroll 
     if(myRectangle.y - delay > 0) 
      window.scrollTo(0, myRectangle.y - delay); 

     // request new frame 
     requestAnimFrame(function() { 
      animate(myRectangle, canvas, context, startTime); 
     }); 
    } 

    function load(){ 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 

     var myRectangle = { 
      x: 239, 
      y: 0, 
      width: 100, 
      height: 50, 
      borderWidth: 5 
     }; 

     drawRectangle(myRectangle, context); 

     // wait one second before dropping rectangle 
     setTimeout(function() { 
      var startTime = (new Date()).getTime(); 
      animate(myRectangle, canvas, context, startTime); 
     }, 2000); 
    } 
</script> 
</head> 
<body background="http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast,_Dhaka,_Bangladesh.JPG" style="margin: 0px;padding: 0px;" onload="load();"> 
    <canvas id="myCanvas" width="578" height="5000"></canvas> 
</body> 
</html>

來源

2014-05-15 21:57:28 Fr3d

使用HTML 5畫布自動滾動

回答

相關問題