HTML5 + javascript：如何讓精靈留在屏幕中間？

我想在HTML5/JS應用程序的屏幕中間畫一個精靈。我有一個大的背景圖片（比屏幕大），我需要滾動它，但精靈必須始終繪製在當前視圖的中心。所以我創建了一個具有背景的div，我試圖繪製精靈，但是當我嘗試處理滾動事件時，繪圖不會發生。HTML5 + javascript：如何讓精靈留在屏幕中間？

我做的一件事是，我將畫布大小設置爲圖像的大小（非常大）。它是否正確？我如何正確設置？

謝謝。

這裏是我的代碼：

var bgCanvas, bgCanvasContext; 
 
var carImg; 
 
var cineImg; 
 

 
var dstXRightLane = 547; 
 
var dstXLeftLane = 450; 
 

 
var maxPoints = 1499999; 
 
var currentPoints = 500000; 
 

 
var firstPrizeHeigth = 17430; 
 
var firstPrizeDstX = 150; 
 
var firstPrizeDstY = 16800; 
 

 
function getHeightFromPoints(points) 
 
{ 
 
    var height = 0; 
 
    console.log("points is ", points);  
 
    height = Math.round(18897 - 0.012598 * points); 
 
    console.log("height is ", height);  
 
    
 
    return height; 
 
} 
 

 
function drawSprite(ctx, img, dstX, dstY) 
 
{ 
 
    console.log("about to draw sprite...");  
 
    ctx.drawImage(img, dstX, dstY); 
 
    console.log("draw returned...");   
 
} 
 

 
function drawCar(dstX, dstY) 
 
{ 
 
    drawSprite(bgCanvasContext, carImg, dstX, dstY); 
 
} 
 

 
function drawCarOnLeftLane(dstY) 
 
{ 
 
    drawCar(dstXLeftLane, dstY);  
 
} 
 

 
function drawCarOnRightLane(dstY) 
 
{ 
 
    drawCar(dstXRightLane, dstY); 
 
} 
 

 
function gotoBotton() 
 
{ 
 
    // cross browser solution 
 
    window.scrollTo(0, document.body.scrollHeight || 
 
         document.documentElement.scrollHeight);  
 
} 
 

 
var lastScrollYPosition = 0; 
 

 
function scrollEventHandler(e) 
 
{ 
 
    console.log("handling scroll event.."); 
 
    lastScrollYPosition = window.scrollY; 
 
    
 
    console.log("current scroll y-position is ", lastScrollYPosition); 
 
    console.log("current scroll top is ", window.scrollTop); 
 
    console.log("current scroll bottom is ", window.scrollBotton);  
 
    
 
    console.log("scroll event handler finished");  
 
} 
 

 
function isToWinPrize(currentHeight, prizeHeight) 
 
{ 
 
    return(currentHeight < prizeHeight); 
 
} 
 

 

 
// on load function 
 
(function() 
 
{ 
 
    var dstY = 18430;  
 

 
    console.log("main program entry point"); 
 
    
 
    console.log("about to call gotoBotton"); 
 
    gotoBotton();  
 
    console.log("gotoBotton returned"); 
 
    
 
    bgCanvas = document.getElementById("bgPrizes"); 
 
    bgCanvas.width = 1080; 
 
    bgCanvas.height = 18898;  
 
    bgCanvasContext = bgCanvas.getContext("2d");  
 
    carImg = document.getElementById("car"); 
 
    cineImg = document.getElementById("cine");  
 
    
 
    window.addEventListener('scroll', scrollEventHandler); 
 
    
 
    currentPointsHeight = getHeightFromPoints(currentPoints); 
 

 
    if(isToWinPrize(currentPointsHeight, firstPrizeHeigth)) 
 
    { 
 
     console.log("drawing prize..."); 
 
     drawSprite(bgCanvasContext, cineImg, firstPrizeDstX, firstPrizeDstY); 
 
    } 
 
    else 
 
    { 
 
     console.log("still need ", firstPrizeHeigth - currentPointsHeight, " points to win"); 
 
    }  
 
    
 
    drawCarOnLeftLane(dstY); 
 
    drawCarOnRightLane(dstY); 
 
    
 
}());

<html> 
 
    <head> 
 
     <title>Progress Bar</title> 
 
    </head> 
 
    <body>  
 
     <div style="background-image: url(./img/bg.jpg); height: 18898px; 
 
                  width: 1080px;"> 
 
      <canvas id="bgPrizes"></canvas> 
 
      
 
      <div style="display:none"> 
 
       <img id="car" src="./img/car.png" width="82" height="162"> 
 
      </div> 
 
      <div style="display:none"> 
 
       <img id="cine" src="./img/cine.png" width="199" height="262"> 
 
      </div> 
 
      
 
      <script src="progressBar.js"></script> 
 
     </div> 
 
    </body> 
 
</html>

來源

2017-04-12 daniel.franzini