フロントエンドエンジニアもどきの備忘録

デザイナーやらコーダーを経てフロントエンドに落ち着きました。

マウス追尾で円のcos,sinを表示

codepen.io

最近よくお世話になっている東大生が教えるビジュアル数学というサイトの三角関数のページにおいてあるFlashを、一からCanvasで再現してみました。

円の上にマウスをホバーさせてやると、それに追尾してその位置のcos,sinを表示します。

アークタンジェントというタンジェント逆関数を使って求めると良いようです。 (...アークタンジェントというのを今回初めて知りました)

JavaScriptではMath.atan2()を使って簡単に求めることができます。

中心からのマウスの座標をMath.atan2(y, x)と渡してやるとラジアンが求まるので、それをそのままMath.cos()Math.sin()に渡してやるとcos,sinを求めることができます。とても便利ですね。

...ちなみに東大生が教えるビジュアル数学というサイト、数学嫌いの自分でもすっと理解できるような説明が多く、数学嫌いだったけど数学をもう一度勉強してみたい方におすすめです。

Canvasでシンプルなアナログ時計

codepen.io

シンプルな時計の実装です。

三角関数で現在の時間の位置を求めて描画を繰り返します。 フレームレート的には1fpsで十分なのでrequestAnimationFrameを使わなくても良かったかもしれません。

針の描画

三角関数で現在の時間のそれぞれの針の位置を求めて線を引いています。

drawHands()の中でまずそれぞれの時間の角度を求めています。

function drawHands() {
  var date = new Date();
  // 現在の時間を取得
  var h = date.getHours();
  h = h > 12 ? h - 12 : h;
  var m = date.getMinutes();
  var s = date.getSeconds();
  // それぞれの針の角度を求めて drawHand へ渡す
  drawHand(Math.PI/6*h + Math.PI/(60*6)*m + Math.PI/(60*60*6)*s - Math.PI/2, true);
  drawHand(Math.PI/30*m + Math.PI/(60*30)*s - Math.PI/2, false);
  drawHand(Math.PI/30*s - Math.PI/2, false);
}

半周 / 半周分の時間の距離 * 現在の時間でその時間の角度を求めることができます。 1週分から求めても一緒ですが、Math.PI(π)は半周なのでこの方が式が少なく済みます。

さらに時針の場合は経過分と秒の分の角度を、分針の場合は経過秒の角度を、それぞれ加算しています。

角度はx軸を0時したものになっているので、1/4の角度を減算してy軸が0時となるようにします。

drawHand()では、それぞれの針の角度から座標を計算してそこまでの線を引いています。

function drawHand(angle, isHour) {
  var handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION
                          : RADIUS - HAND_TRUNCATION;
  ctx.moveTo(canvas.width/2, canvas.height/2);
  // cosθ, sinθ に針の長さをかけたものがx, yの座標になります
  ctx.lineTo(canvas.width/2 + Math.cos(angle) * handRadius,
              canvas.height/2 + Math.sin(angle) * handRadius);
  ctx.stroke();
}

※コードはオライリープログラミングHTML5 Canvasのサンプルを修正して使用しています。

参考

Canvasでシンプルな正弦波

正弦波のお勉強メモ。

正弦波は

振幅 * sin( 角度速度 * 時間 )

で表すことができます。

角度速度は

角度速度 = 2π / 周期

で計算することができます。

処理の流れとしてはcanvasの左端から1pxづつの距離を時間としてループで描画しています。

codepen.io

文字を順番にブラーインさせるSass

Sassを使うとほんと簡単にタイミング調整ができて楽ですね。 (ベンタープレフィックス対応にCompassも使用しています)

codepen.io

CSS自体はtext-shadowのぼかし幅を縮めていくのと同時に、 文字をフェードインさせて実装します。

MacのChromeとSafariでSelect要素に高さを指定しても効かない

-webkit-appearance: menulist-button;を指定すると効きます。

デモ

ちなみに-webkit-appearance: none;ですべての見た目をリセットすることができますが、 矢印等もすべて消えてしまうようなので、高さだけなんとかしたい場合は個別に対策が良さそうです。 (見た目に影響しますが、border:none;でも高さを効かせることができます)

css - How to increase the height of the select box - Stack Overflow

webkit-appearanceの一覧はこちら

IE8のmin-heightはborder-boxを指定した要素でもcontent-boxとして計算されてしまう

バグなのか仕様なのかはわかりませんが、border-boxをかけていてもIE8ではmin-heightはborderやpaddingを含んで計算されてしまいます。

https://shanetomlinson.com/2012/box-sizing-border-box-padding-and-min-height-bug-in-firefox-and-ie/

過去にはFirefoxでも同様のバグが起こっていたようで、 Modernizrにmin-heightをどう計算するか判別を追加して判別して回避してやる方法もあるようです。 Box-sizing and min-height CSS trouble within Firefox - Volker Rose

MacでChromeやSafariのホバーでマウスカーソルがポインターにならない

結論、Photoshopを閉じると治ります。おそらくYosemite以上で起こるようです。

Issue 357347 - chromium - Mouse cursor stopped turning into a pointer while hovering over links - Monorail

僕はCCではなくCS6ですが発生しました。 画像を作りながらコーディング作業をしている方は要注意です。