ランドルト環を表示するだけのウェブサイト
ランドルト環を表示するだけのウェブサイト
視力検査につかわれているアレです.
http://landolt-ring.appspot.com/ ← こちらよりアクセスできます.
キーボードの矢印キー(↑→↓←)を押すことで操作ができます.結果によって,環の大きさが変わります.
スマートフォン対応のため,マウスクリックでも操作できるようになりました.
Google App Engineにおいてありますが,JavaScriptしか用いていないので,Servletではありません.
ランドルト環をJavaScriptでCanvasに描画する
JavaScriptのコードを部分的にはっておきますが,こんな感じで書けます.逆三角関数をつかうのがポイントですね.
<script type="text/javascript"> <!-- function landolt(r, angle){ var canvas = document.getElementById('canvas'); angle = (angle%360)*Math.PI/180; if(canvas.getContext){ var x = canvas.width/2; var y = canvas.height/2; var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(x, y, r, angle-Math.asin(1/5) , angle+Math.asin(1/5), true); ctx.arc(x, y, 3*r/5, angle+Math.asin(1/3) , angle-Math.asin(1/3), false); ctx.fill(); } } //--> </script>