图像位置在 HTML5 Canvas 中的设备之间更改答案

【问题标题】：Image position changing on device to device in HTML5 Canvas图像位置在 HTML5 Canvas 中的设备之间更改
【发布时间】：2013-10-09 13:48:40
【问题描述】：

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

这是我的代码

  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>

【问题讨论】：

您需要从窗口对象获取屏幕测量值并将其考虑在内。您可以在窗口调整大小事件上设置一个事件侦听器（这对于 jQuery 来说是微不足道的，对 vanilla javascript 不太确定）并在屏幕缩放/调整大小时重新定位您的图像。
@francisco.preller 感谢您的回复.. 听起来不错，但我是 Jquery 和 JS 的初学者。我不知道该怎么做？可以举个例子吗？
@user2092317 我是动态做的，我不想明确地放在中心、左边、右边等等。
希望答案有帮助，不能久留，抱歉...

标签： javascript css canvas cordova html5-canvas

【解决方案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 );

});

抱歉，简短，希望对您有所帮助。我稍后会回来检查这是否有帮助并在必要时添加它，祝你好运！

【讨论】：

谢谢，我会检查一下。给我一些时间
我已经考虑了所有设备的窗口高度和宽度，并且背景图像具有滚动功能，所以当我滚动它时，窗口宽度和高度会增加，因此炸弹图像的位置也会发生变化。如何动态修复它们