时间戳

首页 > 解决方案 > 画布上的相对定位按钮会切断大部分画布

html - 画布上的相对定位按钮会切断大部分画布

问题描述

我正在尝试使用 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;

}
<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定位时，容器都会缩小，但我不相信还有其他方法可以做到这一点。如果最终最终用户决定缩放他们的屏幕，使用absolute定位将在按钮位置产生错误，因此我试图寻找一种解决方案，其中按钮将始终保持在画布上的同一位置。

标签： htmlcssbuttoncanvasposition

解决方案

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

.container {

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

推荐阅读