ランドルト環を表示するだけのウェブサイト

ランドルト環を表示するだけのウェブサイト

視力検査につかわれているアレです.
http://landolt-ring.appspot.com/ ← こちらよりアクセスできます.

キーボードの矢印キー(↑→↓←)を押すことで操作ができます.結果によって,環の大きさが変わります.
スマートフォン対応のため,マウスクリックでも操作できるようになりました.

Google App Engineにおいてありますが,JavaScriptしか用いていないので,Servletではありません.


ランドルト環をJavaScriptCanvasに描画する

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>

ランドルト環を表示するブログパーツ

たぶんブログパーツとしてもつかえると思うので,そこはご自由にどうぞ.inframeで呼び出せばよいはずです.