圖片位置HTML5畫布

設備上更改爲設備我有一個背景圖片（市圖像）滾動，即圖像上，我把一些小的圖像（就像在城市形象上的炸彈圖像）。我根據這些變量，我把炸彈圖像城市形象上有帆布的寬度和高度。當我把炸彈圖像在can.width/2和can.height/2 430 * 300的設備，圖像將在中心，但是當我嘗試測試在更大的屏幕移動，炸彈圖像位置發生變化。我需要將炸彈圖像放置在所有設備的相同位置。當我放大時，位置也在變化。有人請幫我解決這個情況。圖片位置HTML5畫布

這裏是我的代碼

function smallBombImg(){ 
document.getElementById('carImg1').style.top = can.width/2 +"px"; 
document.getElementById('carImg1').style.left = can.height/2 +"px"; 
//document.getElementById('carImg1').style.background-attachment = "fixed"; 
document.getElementById('carImg1').style.display = "block"; 
document.getElementById('carImg1').src = 'img/bomb1.png'; 
    }

HTML代碼是在這裏

<body> 
<div id="container"> 
    <canvas id="can"></canvas> 
</div> 
<div id="btn"> 
    <input type="image" id="zoomIn" src="img/up.png" onclick="zoomIn()" /> 
    <input type="image" id="zoomOut" src="img/down.png" 
     onclick="zoomOut()" /> 
</div> 
<div id="score"> 
    <p id="scoreCount"> 
     <b></b> 
    </p> 
</div> 
<div> 


<img alt="simple1" id="carImg1" style="position: absolute; display: none;" /> 




</div> 
</body>

來源

2013-10-09 Mallikarjun

您將需要從窗口對象獲取屏幕尺寸，並採取那些考慮。你可以在window resize事件上設置一個事件監聽器（這對於jQuery來說很簡單，對於vanilla javascript不太確定），並且在屏幕放大/調整大小時重新定位你的圖像。 –

@答覆francisco.preller謝謝..聽起來在jQuery和JS不錯，但林非常初學者。我沒有得到如何去做？你能舉一個例子嗎？ – Mallikarjun

@ user2092317我正在動態執行此操作，我不想將其明確放置在中心位置，左側，右側和所有位置。 – Mallikarjun

我必須簡短，我很抱歉，我要遲到了。

使用jQuery：

var windowEventTimeoutEnded; 

$(window).resize(function() { 

    clearTimeout(windowEventTimeoutEnded); 
     $(window).height(); // gets the height of the window 
     $(window).width(); // gets the width of the window 

    // This ensures the below does not trigger until the resize event is finished 
    windowEventTimeoutEnded = setTimeout(function() { 

     // Perform your resizing math and logic here, such 
     canvas.css({ 
      width: 1234, 
      height: 235, 
      position: 'absolute' // etc, etc, etc 
     }) 

    }, 500); 

});

對不起，簡潔，希望這有助於。我會在稍後返回並檢查這有助於如有必要，好運氣給它添加！

來源

2013-10-09 05:48:40

謝謝，我會檢查這個。給我一些時間 – Mallikarjun

我已經考慮過所有設備的窗口高度和寬度，並且背景圖像具有滾動功能，所以當我滾動窗口時，窗口寬度和高度都在增加，所以炸彈圖像位置也在變化。如何動態修復它們 – Mallikarjun

圖片位置HTML5畫布

回答

相關問題