Javascript - поместите элемент html над холстом

Можно ли через jquery или javascript добавить поле ввода в произвольную позицию над элементом <canvas>?

Я пробовал следующее:

изменение z-индекса canvas- и input-поля
помещая холст в свойство div with relative и input-поле внутри позиции div with absolute, но тогда есть эта уродливая полоса прокрутки, которая мне не очень нужна.

Моя index.html страница выглядит так:

<!DOCTYPE html>
<html manifest = "cache.manifest">

<head>
    <title>WebApp</title>

    <meta http-equiv = "content-type" content = "text/html; charset=ISO-8859-1" />
    <meta http-equiv = "X-UA-Compatible" content = "chrome=1" />
    <meta name = "viewport" content = "width=device-width,minimum-scale=1, maximum-scale=1" />
    <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
    <meta name = "apple-mobile-web-app-capable" content = "yes" />
    <meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" />

    <script type = "text/javascript" src = "/ext/jquery-3.1.1.min.js"></script>
    <script type = "text/javascript" src = "/ext/jquery.i18n.js"></script>
    <script type = "text/javascript" src = "/ext/jquery.ajaxmanager.js"></script>
    <script type = "text/javascript" src = "/ext/jquery.model.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
</head>

<body>
    <noscript>
        <div style = "text-align: center; width: 100%; visibility: visible;">
            JavaScript ist in Ihrem Browser deaktiviert. Bitte aktivieren Sie es um diese Applikation zu starten.
            <p>
                JavaScript é disattivato nel Suo browser. Si prega di attivarlo per usare questa applicazione.
                <p>
                    JavaScript is disabled in your browser. Please enable it to use this application.
                    <p>
                        <a href = "http://www.activatejavascript.org/">How to?</a>
        </div>
    </noscript>
    <canvas id = "app" width = "150" height = "30"></canvas>
</body>

</html>

Через javascript я добавляю другой холст:

//This is the main canvas
this.canvas.style.zIndex = 6;
this.canvas.style.position = "absolute";
this.canvas.style.border = "0px solid";
this.canvas.style.top = 0 + "px";
this.canvas.style.left = 0 + "px";

//Some other canvas elements
var show_canvas = document.createElement('canvas');
$(this.canvas).parent().append(show_canvas);
show_canvas.style.zIndex = 4;

var other_canvas = document.createElement('canvas');
$(this.canvas).parent().append(show_canvas);
other_canvas.style.zIndex = 0;

var another_canvas = document.createElement('canvas');
$(this.canvas).parent().append(show_canvas);
another_canvas.style.zIndex = 3;
another_canvas.attr('id', 'another_canvas');

var container = document.createElement('div');
$(container).attr('id', 'input_container');
$('#another_canvas').append(container);

var user = document.createElement('input');
var pass = document.createElement('input');

$(user).attr('id', 'username');
$(pass).attr('id', 'password');

$(container).append(user);
$(container).append(pass);

$('#input_container').css({
  'position': 'absolute',
  'z-index': '100'
});

На данный момент это выглядит так: Javascript - поместите элемент html над холстом

Было бы здорово, если бы кто-то из вас помог мне решить мою проблему XD.

javascript html css canvas html5-canvas

13.02.2019 16:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

730

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Помещение холста и ввода в div с div, имеющим «позиция: относительная;» и дети, имеющие «положение: абсолютное»; это решение. Если вам не нужны полосы прокрутки, либо убедитесь, что материал внутри div меньше, чем div, ИЛИ установите «overflow: hidden».

Еще одна вещь: установите тип отображения холста на «блок». Без этого холст имеет тип «span», который добавляет пространство и вызывает появление полосы прокрутки, если холст установлен на 100%

const ctx = document.querySelector('#c1').getContext('2d');
const {width, height} = ctx.canvas;
ctx.fillStyle = "#0FF";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#F00";
ctx.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, Math.PI * 2, true);
ctx.fill();

body {
  margin: 0;
}
#container {
  position: relative;
  width: 100vw;
  height: 100vh;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#form {
 position: absolute;
 left: 1em;
 top: 1em;
 padding: 0.5em;
 background-color: rgba(0, 0, 0, 0.7);
}
#form input {
  font-size: 20pt;
  display: block;
  border: none;
  color: white;
  background-color: #444;
  margin: 0.5em;
}

<div id = "container">
  <canvas id = "c1"></canvas>
  <div id = "form">
    <input type = "text" id = "user" placeholder = "username">
    <input type = "password" id = "pass" placeholder = "password">
  </div>
</div>

у вас был свой холст 150х30? Это довольно мало, но мы можем настроить размеры

const ctx = document.querySelector('#c1').getContext('2d');
const {width, height} = ctx.canvas;
ctx.fillStyle = "#0FF";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#F00";
ctx.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, Math.PI * 2, true);
ctx.fill();

#container {
  position: relative;
  width: 150px;
  height: 30px;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#form {
 position: absolute;
 left: 0;
 top: 0;
 background-color: rgba(0,0,0,0);
}
#form input {
  font-size: 8px;
  display: block;
  background-color: rgba(0,0,0,0);
  border: 1px solid gray;
}

<div id = "container">
  <canvas id = "c1"></canvas>
  <div id = "form">
    <input type = "text" id = "user" placeholder = "username">
    <input type = "password" id = "pass" placeholder = "password">
  </div>
</div>

Это сработало, спасибо за вашу помощь. Но еще один вопрос. Как я могу расположить входы?

— 13.02.2019 16:40

где вы хотите, чтобы они были? Я предполагаю, что вы хотели, чтобы они двигались как группа, поэтому они окружены <div id = "form">. Таким образом, вы можете установить #form { left: 10px; top: 15px } или что-то еще в положение. Если входные данные выходят за пределы div, вы получите полосу прокрутки, если не добавите overflow:hidden в контейнер. Но если входные данные выходят за пределы контейнера, то часть из них будет скрыта и непригодна для использования пользователем.

— 13.02.2019 16:44

Спасибо, вы спасли мой день XD

— 13.02.2019 16:49

13.02.2019 16:25