Question

我有一个带滚动的背景图像（城市图像），在该图像上我放置了一些小图像（就像城市图像上的炸弹图像一样）。我有画布宽度和高度取决于这些变量我将炸弹图像放在城市图像上。当我将炸弹图像放在can.width / 2和can.height / 2的430 * 300设备中时，图像将位于中心，但当我尝试在更大的屏幕移动设备上进行测试时，炸弹图像位置正在发生变化。我需要将炸弹图像放在所有设备的相同位置。当我放大时，位置也在变化。任何人都可以帮我解决这个问题。

这是我的代码

  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>

Answer 1

我必须简短，我很抱歉，但我迟到了。

使用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 );

});

对不起，简单，希望这会有所帮助。我将在稍后返回并检查这是否有帮助并在必要时添加，祝你好运！

在HTML5 Canvas中将设备上的图像位置更改为设备

1 个答案: