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