Javascript HTML5画布中设备间图像位置的变化_Javascript_Css_Canvas_Cordova_Html5 Canvas

Javascript HTML5画布中设备间图像位置的变化

javascript css canvas cordova html5-canvas

Javascript HTML5画布中设备间图像位置的变化,javascript,css,canvas,cordova,html5-canvas,Javascript,Css,Canvas,Cordova,Html5 Canvas,我有一个带有滚动条的背景图像（城市图像），在该图像上我放置了一些小图像（就像城市图像上的炸弹图像）。我有画布的宽度和高度取决于这些变量，我把炸弹图像放在城市图像上。在430*300设备中，当我将炸弹图像放置在can.width/2和can.height/2时，图像将居中，但当我尝试在大屏幕手机上测试时，炸弹图像的位置正在改变。我需要在所有设备的相同位置放置炸弹图像。当我放大时，位置也在变化。任何人都可以帮我解决这个问题这是我的密码 function smallBombImg(){ docu

我有一个带有滚动条的背景图像（城市图像），在该图像上我放置了一些小图像（就像城市图像上的炸弹图像）。我有画布的宽度和高度取决于这些变量，我把炸弹图像放在城市图像上。在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：

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

});

抱歉这么简单，希望这能有所帮助。我将稍后返回，检查这是否有帮助，并在必要时添加，祝您好运

您需要从窗口对象获取屏幕测量值，并将其考虑在内。您可以在窗口调整大小事件上设置一个事件侦听器（这对于jQuery来说是微不足道的，对于普通javascript不太确定），并在屏幕缩放/调整大小时重新定位图像。@francisco.preller感谢您的回复。。听起来不错，但我是Jquery和JS的初学者。我不知道怎么做？你能举个例子吗？@user2092317我在动态地做，我不想显式地放在中间、左边、右边和所有地方。希望答案有帮助，不能停留太久，对不起……谢谢，我会检查这个。给我一些时间，我考虑了所有设备的窗口高度和宽度，背景图像有滚动特性，所以当我滚动它时，窗口宽度和高度都在增加，所以炸弹图像的位置也在变化。如何动态地修复它们