时间戳

首页 > 解决方案 > 在画布上发布定位输入

javascript - 在画布上发布定位输入

问题描述

我想编写一个程序来根据另外两个找到直角矩形的第三条边。我的想法是画一个三角形并将输入框放在三个不同的边旁边。但是，我无法让它们粘在侧面（缩放时它们会移动）。这是代码：

<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>

这是一个带有代码的网站：http ://rightangledrectangleirl.bitballoon.com/

编辑：设法修复它：

<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>

标签： javascripthtmlcsscanvas

解决方案

绝对定位相对于具有position明确定义的属性的最后一个容器起作用。在这种情况下，trianglediv 具有position:relative，因此输入框将相对于它进行绝对定位。

考虑到这一点，需要注意的是，当页面大小发生变化时，您的trianglediv 的大小也会发生变化，因此绝对定位也会发生变化。为了解决这个问题，您应该给triangle容器一个固定大小（或至少一个可预测的）。使它与画布的大小相匹配似乎是一个不错的选择。

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

最后你应该重做你的top, left, bottom, right百分比。请记住，您也可以使用像素。我不知道您希望将项目放置在哪里，但也许下面的代码会让您走上正轨：

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();
.triangle {
  position: relative;
  text-align: center;
  width : 500px;
  height : 250px;
  margin : auto;
}

#a {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 3%;
}

#b {
  position: absolute;
  bottom: 0px;
  right: 50%;
  width: 3%
}

#hypo {
  position: absolute;
  top: 45%;
  left: 40%;
  width: 100px;
}
<body align="center">
  <h2> Triangle rectangle </h2>
  <div class="triangle">
    <form autocomplete="off">
      <input type="text" name="a" id="a" placeholder='a'>
      <input type="text" name="b" id="b" autofocus='on' placeholder='b'>
      <input 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>
</body>

推荐阅读