Fatal编程技术网
  • javascript/
  • Javascript 在画布上发布定位输入

Javascript 在画布上发布定位输入

javascript html css canvas

Javascript 在画布上发布定位输入,javascript,html,css,canvas,Javascript,Html,Css,Canvas,我想做一个程序，在其他两个矩形的基础上找到一个直角矩形的第三条边。我的想法是画一个三角形，把输入框放在三条不同的边旁边。但是，我很难让它们粘在侧面（缩放时它们会移动）。代码如下： <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <head> <title>Trian

我想做一个程序，在其他两个矩形的基础上找到一个直角矩形的第三条边。我的想法是画一个三角形，把输入框放在三条不同的边旁边。但是，我很难让它们粘在侧面（缩放时它们会移动）。代码如下：

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
   <head> 
        <title>Triangle rectangle</title>
        <style>
            .triangle {
                position: relative;
                text-align: center;
            }
        </style>
   </head>
   <body align="center">      
        <h2> Triangle rectangle </h2>
        <div class="triangle">
            <form autocomplete="off">
                <input style="position: absolute; top: 50%; right: 65%; width: 3%" type="text" name="a" id="a" placeholder='a' >
                <input style="position: absolute; top: 260px; right: 950px; width: 3%" type="text" name="b" id="b" autofocus='on' placeholder='b' >
                <input style="position: absolute; top: 100px; right: 850px; width: 5%" type="text" name="hypo" id="hypo" placeholder='Hypothénuse' >
            </form> 
            <canvas id="myCanvas" width="500" height="250" >Your browser does not support the HTML5 canvas tag.</canvas>
        </div>

        <script>
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(500, 250);
            ctx.moveTo(0, 0);
            ctx.lineTo(0, 250);
            ctx.moveTo(0, 250);
            ctx.lineTo(500, 250);
            ctx.stroke();
        </script>
   </body>
</html> 


三角形矩形
.三角形{
位置：相对位置；
文本对齐：居中；
}
三角形矩形
您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.lineTo（500250）；
ctx.moveTo（0,0）；
ctx.lineTo（0250）；
ctx.moveTo（0250）；
ctx.lineTo（500250）；
ctx.stroke（）；
以下是一个带有代码的站点：

编辑：已设法修复它：

<div style="position:relative; width:500px;height:250px; margin: 0 auto;" align="center">
    <canvas id="myCanvas" width="500" height="250">Your browser does not support the HTML5 canvas tag.</canvas>
    <form autocomplete="off">
        <input style="position: absolute; top: 125px; left: 10px; width: 50px" type="text" name="a" id="a" autofocus='on' placeholder='a' >
        <input style="position: absolute; top: 220px; right: 180px; width: 50px" type="text" name="b" id="b" autofocus='on' placeholder='b' >
        <input style="position: absolute; top: 90px; right: 90px; width: 80px" type="text" name="hypo" id="hypo" autofocus='on' placeholder='Hypothénuse' >
    </form>     
</div>


您的浏览器不支持HTML5画布标记。
绝对定位相对于明确定义了
位置
属性的最后一个容器工作。在这种情况下，
三角形
div具有
位置：相对
，因此输入框将绝对相对于该三角形定位

记住这一点，重要的是要注意，当页面大小改变时，
三角形的大小也会改变，因此绝对位置也会改变。为了解决这一问题，您应该为
三角形
容器提供一个固定大小的容器（或者至少是一个可预测的容器）。使其与画布的大小相匹配似乎是一个不错的选择

不幸的是，给它一个固定的大小会使它水平居中的方式中断，但这可以通过使用
margin:auto
来固定

最后，你应该重做你的
上、左、下、右
百分比。请记住，您也可以使用像素。我不知道您希望将项目放置在何处，但以下代码可能会帮助您走上正轨：



var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.lineTo（500250）；
ctx.moveTo（0,0）；
ctx.lineTo（0250）；
ctx.moveTo（0250）；
ctx.lineTo（500250）；
ctx.stroke（）

.triangle{
位置：相对位置；
文本对齐：居中；
宽度：500px；
高度：250px；
保证金：自动；
}
#a{
位置：绝对位置；
最高：50%；
左：0px；
宽度：3%；
}
#b{
位置：绝对位置；
底部：0px；
右：50%；
宽度：3%
}
#海波{
位置：绝对位置；
最高：45%；
左：40%；
宽度：100px；
}



三角形矩形
您的浏览器不支持HTML5画布标记。

问题是您的
.triangle
div没有设置宽度或高度：



.triangle{
位置：相对位置；
文本对齐：居中；
宽度：500px；
高度：250px；
保证金：0自动；
}
h{
位置：绝对位置；
顶部：120px；
右：100px；
宽度：100px；
}
.b{
位置：绝对位置；
底部：-35px；
左：210像素；
宽度：50px；
}
.a{
位置：绝对位置；
顶部：120px；
左：-70px；
宽度：50px；
}


三角形矩形
您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.lineTo（500250）；
ctx.moveTo（0,0）；
ctx.lineTo（0250）；
ctx.moveTo（0250）；
ctx.lineTo（500250）；
ctx.stroke（）；

非常感谢您清晰准确的解释！工作得很好！