JavaScript|Sample Function
JavaScriptプログラミングで活用できる小さな関数のコレクション
プログラミングの参考に、随時追加しています。
CONTENTS
CANVAS 上のマウス座標を得る
ブラウザWINDOW上の座標 - CANVASの左上の座標 を計算して取得します。
- 関数
function getMousePosition(evt) { var rect = evt.target.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; }
- evt:イベントハンドラーから渡されるイベント情報
- 使い方
- イベントリスナーの事前登録が前提です
canvas.addEventListener('event', eventHandler, false);
- event:click, mousemove など
- eventHandler:イベントハンドラーの関数名
- 関数はイベントハンドラー内で利用することが前提で、受け取ったイベント情報を渡す必要があります(以下の例では evt)。
var mousePos = getMousePosition(evt);
値は、mousePos.x, mousePos.y で得られます。
- イベントリスナーの事前登録が前提です
マッピング
a1 - a2 間における x の相対値を b1 - b2 間の相対値に変換。
数学的な座標をWindow座標に変換するのに便利です。
function mapping( x, a1, a2, b1, b2 ) { if ( a2 == a1 ) return NaN; return ( b2 - b1 ) / ( a2 - a1 ) * ( x - a1) + b1; }
- 使い方
f = mapping(2, 0, 10, 100, 200) ; console.log(f); // f:120 g = mapping(42, 40, 50, 100, 200) ); console.log(g); // g:120
- 座標変換への利用
座標 xs - xe 間の x を スクリーン幅 0 - 640 にマッピングした場合の座標sx = mapping( x, xs, xe, 0, 640);
- 具体的な値で確認
x = mapping( 0.1, -1, 1, 0, 640 ); console.log( x ); // x:352(中央320より32右)
ラジアン・角度変換
- 関数 角度>ラジアン
Math.radians = function(degrees){ if( isNaN(degrees) ) return NaN; return degrees * Math.PI / 180; }
- 関数 ラジアン>角度
Math.degrees = function(radians){ if( isNaN(radians) ) return NaN; return radians * 180 / Math.PI; }
- 使い方
rad = Math.radians( degrees ); deg = Math.degrees( radians );
現在時刻を hh:mm:ss 形式で返す
function StampTime(){ var t = new Date(); var hh = t.getHours(); if(hh<10){ hh = "0"+hh;} var mm = t.getMinutes(); if(mm<10){ mm = "0"+mm;} var ss = t.getSeconds(); if(ss<10){ ss = "0"+ss;} return hh+ ':' + mm + ':' + ss; }
現在時刻を表示したい場所に、以下のように書いて利用します。
obj.innerText = StampTime();
ランダムな色を発生させる
function randomColor(){ var col = Math.floor( Math.random() * 0xFFFFFF ).toString(16); for( var i = col.length; i<6; i++ ) { col = "0" + col; } return "#" + col; }
RGB各8ビット、ランダムに値を選んで、16進数にして返す。
6桁に満たない場合は先頭に 0 を追加しています。
色を与える記述において、以下のように書いて利用します。
obj.style.backgroundColor = randomColor();
ベンダープレフィックスを取得
ベンダープレフィックスというのは、スタイルシートでプロパティーの先頭に必要に応じてつける -moz- や -webkit- といった記号のことです。
var VENDER_PREFIX = (function() { var ua = navigator.userAgent; if (ua.indexOf('Opera') != -1) { return 'O'; } else if (ua.indexOf('MSIE') != -1) { return 'ms'; } else if (ua.indexOf('WebKit') != -1) { return 'webkit'; } else if (navigator.product == 'Gecko') { return 'Moz'; } else { return ''; } })();