#author("2021-01-10T14:49:15+09:00;2019-07-05T20:51:15+09:00","default:inoue.ko","inoue.ko")
*JavaScript｜Sample Function
JavaScriptプログラミングで活用できる小さな関数のコレクション
プログラミングの参考に、随時追加しています。
~
***CONTENTS
#contents2_1
~
***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);
// sy = mapping( y, ys, ye, 480, 0);
-具体的な値で確認
x = mapping( 0.1, -1, 1, 0, 640 );
console.log( x ); // x：352（中央320より32右）
// y = mapping( 0.1, -0.75, 0.75, 480, 0);
// console.log( y ); // y：208（中央240より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 '';
}
})();
//即時関数を使った書き方になっています。
~
~
~
