HTML5 canvasでマウス追従するヨーヨーみたいな動き « SMART LAB

スマートフォン,smart phone,Windows7,iPhone,Android,iPadお祭りなんかでヨーヨー釣りありますよね。水風船にゴムをくっつけて遊ぶあれ。 あのヨーヨーの動きを canvas でやってみたいと思います。 ヨーヨー風サンプル ※canvasタグ対応ブラウザで確認できます。 どうでしょう。ゴムの感じもそれっぽく再現できてるのではないかと思います。 window.addEventListener('mousemove', function(e) { mouseX = e.pageX; mouseY = e.pageY; }, false) mouseX / mouseY というのは取得したマウス座標を格納しておく変数です。 mousemoveイベントが送出されるたび（= マウスが動くたび）に更新されます。 canvas = document.getEl