Question

我正在尝试在HTML5 / JS应用程序中在屏幕中间绘制一个精灵。我有一个大的背景图像（大于屏幕），我需要滚动它，但必须始终在当前视图的中心绘制精灵。所以我创建了一个带背景的div，我正在尝试绘制精灵，但是当我尝试处理滚动事件时，绘制不会发生。

我做的一件事是我将画布大小设置为图像的大小（非常大）。它是否正确？我该如何正确设置？

谢谢。

这是我的代码：

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>

Answer 1

我认为你想要做一些像游戏，中间的角色和背景移动，让它像移动一样。

你应该制作一个1920 * 1080，将精灵放在中间并移动背景，我认为这个解决方案可能适合你。

HTML5 + javascript：如何让精灵停留在屏幕中间？

1 个答案: