Canvas直角三角形输入框定位偏移问题及修复方案

嘿，我懂你遇到的麻烦——页面一缩放，输入框就跟三角形边“分家”了，这事儿我之前也碰到过！问题出在定位的参考系不对，原来的代码里输入框是相对于整个页面定位的，自然会跟着页面尺寸乱跑。

为啥原来的代码不行？ #

原来的.triangle容器虽然加了position: relative，但没固定宽高，而且输入框用了right: 950px这种硬编码的视口级像素值，一旦页面缩放或者换个屏幕尺寸，这些数值就和canvas的位置不匹配了，输入框当然会移位。

怎么修复？ #

核心就是把canvas和所有输入框塞进一个固定宽高的相对定位容器里，这样输入框的绝对定位就会以这个容器为基准，而不是整个页面，就能死死贴住三角形的边了。

修复后的完整代码 #

<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta charset="UTF-8"> 
<head> 
<title>Triangle rectangle</title> 
<style>
/* 容器宽高和canvas完全一致，设为相对定位作为输入框的定位参考 */
.triangle-wrap {
  position: relative;
  width: 500px;
  height: 250px;
  margin: 0 auto;
}
</style> 
</head> 
<body align="center"> 
<h2> Triangle rectangle </h2> 
<div class="triangle-wrap"> 
  <!-- 先放canvas，作为底层图形 -->
  <canvas id="myCanvas" width="500" height="250" >Your browser does not support the HTML5 canvas tag.</canvas> 
  <!-- 表单放在容器里，输入框绝对定位相对于wrap容器 -->
  <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" placeholder='b' > 
    <input style="position: absolute; top: 90px; right: 90px; width: 80px" type="text" name="hypo" id="hypo" placeholder='Hypothénuse' > 
  </form> 
</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>

重点改动说明 #

• 新增了triangle-wrap容器，宽高和canvas保持一致（500x250px），设置position: relative后，里面的绝对定位元素都会以它为参考
• 调整了输入框的定位数值，现在是相对于容器的位置，不再依赖整个页面的尺寸
• 移除了重复的autofocus属性（一个页面只应该有一个元素设置自动聚焦）
• 把canvas放在容器最前面，保证它在输入框的下层，不会被遮挡

这样调整后，不管你怎么缩放页面，输入框都会稳稳地待在三角形的对应边旁边啦！

内容的提问来源于stack exchange，提问作者Zorro Le Dozo