JavaScript, xeys を君に!

以下のコードをコピーすると xeyes を表示できます。 refresh
<a href="http://blog.livedoor.jp/nanoris/archives/51806744.html" target="_blank"> <canvas id="xeyes_canvas" width="120px" height="60px"> </canvas></a> <script type="text/javascript"> (function (){ //refreshするには次行をコメントアウトして下さい。 if( document.onmousemove != null ) return; document.onmousemove = function (e) { let canvas = xeyes_canvas; let ctx = canvas.getContext ("2d"); ctx.clearRect (0, 0, canvas.width, canvas.height); ctx.lineWidth = 2; let bdr = canvas.getBoundingClientRect(); let ex = e.clientX-bdr.left; let ey = e.clientY-bdr.top; let a = canvas.width*0.15; //X径。 let b = canvas.height*0.4;//Y径。 if( ctx.ellipse == null ) a = b = canvas.width*0.18; drawEye (canvas, ctx, a, b, ex, ey, canvas.width*0.30, canvas.height*0.5); drawEye (canvas, ctx, a, b, ex, ey, canvas.width*0.70, canvas.height*0.5); }; function drawArc (ctx, cx, cy, a, b, c) { ctx.beginPath (); if( ctx.ellipse == null ) ctx.arc (cx, cy, a, 0, Math.PI*2, true); else ctx.ellipse (cx, cy, a, b, 0, 0, Math.PI*2, true); ctx.fillStyle = c; ctx.fill(); } function drawEye (canvas, ctx, a, b, ex, ey, cx, cy) { let r = Math.atan2 (ey-cy, ex-cx); let c = (a*b) / Math.sqrt ( Math.pow (a,2)*Math.pow (Math.sin(r),2) + Math.pow (b,2)*Math.pow (Math.cos(r),2) ); let d = Math.sqrt ( Math.pow (ex-cx, 2) + Math.pow (ey-cy, 2) ); if( d < c ) c = d; // drawArc (ctx, cx, cy, a, b, "white"); ctx.strokeStyle = "black"; ctx.stroke (); ctx.save (); ctx.clip (); let x2 = cx + Math.cos (r) * (c-a*0.42); let y2 = cy + Math.sin (r) * (c-a*0.42); drawArc (ctx, x2, y2, a*0.42, b*0.38, "black"); // ctx.restore (); } }) (); </script>