Question

我在div中的背景图像有问题。我正在尝试编写一个html-webgame，主要使用canvas。因此，我的索引看起来像这样。

<head>
    <title>Cardgame</title>
    <link rel="stylesheet" type="text/css" href="resoursces/css/index.css">
</head>

<body>
    <div class='game_object' id='game_object'>
        <canvas class='main_canvas' id='main_canvas'>Error</canvas>
    </div>
    <script type="text/javascript" src='main.js'></script>
</body>

问题出现如下：

window.onload = (function() {
    window.addEventListener('resize', resizeCanvas, false);
    function resizeCanvas() {
       drawing();
    } resizeCanvas();
 })();

在函数“drawing（）”中，我正在做两件事。

第一个是删除目前已创建的所有div，

第二个是我用新的x坐标，y-coordinat，hight和width绘制所有div的新东西。所以看起来像

function drawing() {
    delete_div();
    create_div();
}
function delete_div() {
    battlefield_div.style.removeAttribute("backgroundImage", false);
    battlefield_div.parentNode.removeChild(battlefield_div);
}
funtciont create_div() {
    var board_div= document.createElement("div");
    board_div.setAttribute("id", "board");
    board_div.style.position = 'absolute';
    board_div.style.top = board.y1+"px";
    board_div.style.left = board.x2+"px";
    board_div.style.height = board.y2 - board.y1+"px";
    board_div.style.width = board.x1 - board.x2+"px";
    board_div.style.zIndex = '2';
    board_div.style.backgroundImage="url(resoursces/images/board.png)";
    board_div.style.backgroundSize = "100% 100%";
    game_object.appendChild(board_div);
}

这款游戏是一款卡片游戏，我想在不改变浏览器的高度和宽度的情况下调整大小，而不会失去其功能。我正在创建的div是功能的一部分。

一切都运行正常，除了一件事：每当你重新安装浏览器时，div都会被删除，新的会被计算，但背景图像仍在那里。因此，当您将浏览器大小调整为4次时，您只能看到背景图像。

我做错了什么？

任何人都可以帮助我吗？

在使用javascript删除div时，backgroundimage保持不变

0 个答案: