在畫布上查找線條位置

感謝上一個答案。我在畫布上添加了一些更多的圖紙。我還將（*）所有內容都乘以3，以便更好地看到線條。從頂部到底部有一條直線。有沒有辦法找出哪裏「var hdr」會擊中那條線？當hdr + h2命中該行時，需要計算h1。在畫布上查找線條位置

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

來源

2014-11-20 David Morrison

此代碼已經發展得相當不錯，如何調整這個所以它總是在畫布適合？

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

感謝

來源

2014-11-22 09:20:51

在畫布上查找線條位置

回答

相關問題