HTML-在画布上相对定位按钮切断大部分画布-堆栈溢出

顺晟科技

2022-10-18 12:17:57

121

我正在尝试用JS、HTML和CSS制作一个游戏，其中我使用HTML打开一个包/库存菜单。然而，当尝试将我的按钮定位到游戏屏幕（画布）的右下角时，画布的大部分被切断，使其无法运行。

这是我看到的，下面是我的代码。

function setup() {

    game = new Game;
    player = new Player;
    controller = new Controller;
    canvas.width = 800;
    canvas.height = 600;

}

@font-face { font-family: "04b_03"; src: url("assets/fonts/04B_03__.TTF"); }

:root {

    --background: 15, 15, 15;
    --outline: 255, 160, 30;

}

html, body {

    /* Prevent scrollbars */
    overflow: hidden;

    /* Background */
    background-color: rgb(var(--background));

    /* Text */
    font-family: "04b_03", sans-serif;
    /* font-family: "Staatliches", cursive; */
    font-size: 200%;
    color: white;

}

.container {

    position: relative;
    width: auto;
    height: auto;

}

canvas {

    /* Center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Border */
    border: 10px solid white;
    border-radius: 25px;
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.4);

    /* Rendering */
    image-rendering: pixelated;

    /* Positioning */
    z-index: 1;

}

.bag {

    position: absolute;
    right: 5%;
    bottom: 5%;
    z-index: 2;

}

<代码><；身体>；开火<；DIV类=“容器”>；<；画布ID=“ canvas ”>；您的浏览器不支持HTML画布：（<；/canvas>；<；按钮类=“包”>；袋子<；/纽扣>；<；/DIV>；<；/正文>；

我

该怎么解决这个问题？每当我使用<body> FIRE <div class = "container"> <canvas id = "canvas"> Your browser does not support the HTML canvas :( </canvas> <button class = "bag"> Bag </button> </div> </body>定位时，容器就会缩小，但我不认为有任何其他方法可以做到这一点。如果最终用户决定缩放其屏幕，则使用relative定位将在按钮位置中产生错误，因此我试图寻找一种解决方案，使按钮始终停留在画布上的同一位置。

顺晟科技：

没关系，我让它工作了。我在我的容器CSS上使用了固定定位。在这里：

absolute

上一篇：HTML-选择离子标签按钮时不改变颜下一篇：HTML-如何修复页脚，使其在块内容

网站建设

Html

HTML-在画布上相对定位按钮切断大部分画布-堆栈溢出