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.