Question

是否可以通过jquery或javascript在<canvas>元素上方的自定义位置添加输入字段？

我尝试了以下方法：

更改canvas-和input字段的z-index
将画布放入具有div属性的relative和位于input位置的div内的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'
});

当前看起来像这样： Screenshot of the current status

如果你们中的一些人可以帮助我解决XD问题，那将是非常棒的事情。

Answer 1

将画布和输入内容放入div中，且div具有“ position：relative;”以及具有“位置：绝对”的孩子；是解决方案。如果您不希望使用滚动条，则请确保div中的内容小于div或设置为“溢出：隐藏”。

另一件事，将画布显示类型设置为“块”。否则，画布类型为“ 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>

您有150x30的画布吗？很小，但是我们可以调整大小

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>

Javascript-在画布上方放置一个html元素

1 个答案: