Question

感谢您之前的回答。我已经在画布上添加了一些绘图。我也有时间（*）一切都是3，所以我可以更好地看到线条。从顶部到底部有一条直线。有没有办法找出＆＃34; var hdr＆＃34;会打那条线吗？当hdr + h2到达该线时，需要计算h1。

＆＃13;

    <!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var p1=7.5*3;
var p2=10.25*3;
var lp=16

var max = lp; // how many times

ctx.moveTo(0,0);

for(i=1; i <= max; i++){

ctx.lineTo(p2*(i-1),p1 * i);
ctx.lineTo(p2 * i,p1 * i);
}
ctx.lineTo(p2*lp,p1*lp);
ctx.lineTo(0,0);
ctx.stroke();

var htx = c.getContext("2d");
var h1=100*3//h1 needs to be calculated
var h2=12*3
var h3=3*3
var hdr=80*3
htx.rect(h1,0,h3,h2);
htx.stroke();


ctx.lineTo(h1,h2);
ctx.lineTo(h1,hdr);


ctx.stroke();


</script>

</body>
</html>

＆＃13;

Answer 1

这段代码已经取得了很好的进展，我如何缩放它以便它总是适合画布？

<!DOCTYPE html>
<html>

<body>

  <label for="text1">LP:
    <input type="text" size="5" maxlength="5" name="text1" value="16" id="lp" />
  </label>
  <label for="text2">p1:
    <input type="text" size="5" maxlength="5" name="text2" value="7.50" id="p1" />
  </label>
  <label for="text3">p2:
    <input type="text" size="5" maxlength="5" name="text2" value="10.0" id="p2" />
  </label>
  <label for="text4">h2:
    <input type="text" size="5" maxlength="5" name="text4" value="12" id="h2" />
  </label>
  <label for="text5">hdr:
    <input type="text" size="5" maxlength="5" name="text5" value="80" id="hdr" />
  </label>
  <input type="button" value="Calculate" onclick="calc()">
  <br>
  <br>
  <br>
  <br>
  <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
    <br />Your browser does not support the HTML5 canvas tag.</canvas>

  <script type="text/javascript">
    function calc() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var p1 = parseFloat(document.getElementById("p1").value);
      var p2 = parseInt(document.getElementById("p2").value);
      var lp = parseInt(document.getElementById("lp").value);

      var max = lp; // how many times

      ctx.moveTo(0, 0);

      for (i = 1; i <= max; i++) {

        ctx.lineTo(p2 * (i - 1), p1 * i);
        ctx.lineTo(p2 * i, p1 * i);
      }
      ctx.lineTo(p2 * lp, p1 * lp);
      ctx.lineTo(0, 0);
      ctx.stroke();

      var htx = c.getContext("2d");
      var h2 = parseInt(document.getElementById("h2").value);
      var h3 = 3
      var hdr = parseInt(document.getElementById("hdr").value);
      var h1 = ((h2 + hdr) / p1 * p2) //h1 needs to be calculated

      htx.rect(h1, 0, h3, h2);

      htx.stroke();


      ctx.lineTo(h1, h2);
      ctx.lineTo(h1, hdr + h2);


      ctx.stroke();
      alert(h1)
    }
  </script>

</body>

</html>

感谢

在Canvas绘图上查找线的位置

1 个答案: