是否可以通过 jquery 或 javascript 在 <canvas> 上方的自定义位置添加输入字段？元素？
我尝试了以下方法:
- 更改
canvas的 z-index - 和input-场 - 将 Canvas 放在
div中与relative属性(property)和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 我正在添加其他 Canvas :
//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'
});
目前它看起来像这样:
如果你们中的一些人能帮助我解决我的问题，那就太棒了 XD。
最佳答案
将 Canvas 和输入放在一个 div 中，该 div 具有“position: relative;” children 有“position:absolute；”是解决方案。如果您不想要滚动条，请确保 div 中的内容小于 div 或设置“溢出:隐藏”。
另外，将 Canvas 显示类型设置为“ block ”。否则 Canvas 类型为“span”，如果 Canvas 设置为 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 的 Canvas 吗？这很小，但我们可以调整大小
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 - 在 Canvas 上方放置一个 html 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54673602/