Tampilan Lensa Cekung :

Coding Lensa Cekung :

<table border="0" width="100%" style="margin-top:-160px">

<tr>

<td colspan="2" style="padding:10px">

<h2> LENSA CEKUNG </h2>

</td>

</tr>

<tr>

<td valign="top" width="25%" style="padding:10px">

<table width="100%">

<tr>

<td>So</td><td>=</td><td><input id="s0" type="text" class="form-

control"/></td><td><span style="margin-left: -34px;">cm</span></td>

</tr>

<tr>
 <td>F</td><td>=</td><td><input id="r" type="text" class="form-control"
/></td><td><span style="margin-left: -34px;">cm</span></td>

</tr>

<tr>

<td colspan="3" align="right">

<button onclick="myFunction()">Hitung</button>

</td>

</tr>

</table>

<table width="100%">

<tr>

<td>S'</td><td>=</td><td><input id="s" type="text" class="form-

control"/></td><td><span style="margin-left: -34px;">cm</span></td>

</tr>

<tr>

<td>M</td><td>=</td><td><input id="m" type="text" class="form-control" /></td>

</tr>

<tr>

<td><br><br><br>Note</td><td></td><td></td>

</tr>

<tr>

<td><br><div style="width:25px; height:6px; background-

color:red;"></div></td>

<td></td>

<td><br>Bayangan</td>
 </tr>

<tr>

<td><br><div style="width:25px; height:6px; background-

color:#33fcff;"></div></td>

<td></td>

<td><br>Benda</td>

</tr>

</table>

</td>

<td>

<img src="g_lenkung.png" width="80px" height="300px" style="

position: relative;

left: 472px;" />

<canvas id="DemoCanvas" width="1000" height="300" style="

position: relative;

left: 0px;

top: -290px;">

</canvas>

<p id="ru1" style="

display:none;
 position: relative;

top: -460px;

left: 375px;">2f</p>

<p id="ru2" style="

display:none;

position: relative;

top: -490px;

left: 375px;">f</p>

<p id="ru3" style="

display:none;

top: -515px;

position: relative;

left: 375px;">f</p>

<p id="ru4" style="

display:none;

top: -545px;

position: relative;

left: 375px;">2f</p>

</td>

</tr>

</table>