HTML5 + Javascript：如何使子画面停留在屏幕中间？
[英]HTML5 + javascript: how to make a sprite stay in the middle of the screen?
问题描述
我正在尝试在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>
1 个解决方案
解决方案1
0 2017-04-12 06:52:09
我认为您想做一些类似游戏的事情，中间的角色和背景移动，使其变得移动。
您应该制作一个1920 * 1080的像素，将精灵放在中间并移动背景，我认为这种解决方案可能适合您。
如何使可拖动元素在放下时保持在新位置（HTML5 不是 jQuery）？
[英]How to make a draggable element stay at the new position when dropped (HTML5 not jQuery)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.