JavaScript/SampleFunction をテンプレートにして作成

開始行:
*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：イベントハンドラーの関数名 --関数はイベントハンドラー内で利用することが前提で、受け... 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); /... g = mapping(42, 40, 50, 100, 200) ); console.log(g); ... -座標変換への利用 座標 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 ).toStr... for( var i = col.length; i<6; i++ ) { col = "0" + col; } return "#" + col; } RGB各8ビット、ランダムに値を選んで、16進数にして返す。 6桁に満たない場合は先頭に ''0'' を追加しています。 色を与える記述において、以下のように書いて利用します。 obj.style.backgroundColor = randomColor(); ~ ~ ***ベンダープレフィックスを取得 ベンダープレフィックスというのは、スタイルシートでプロパ... 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 ''; } })(); //即時関数を使った書き方になっています。 ~ ~ ~

終了行:
*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：イベントハンドラーの関数名 --関数はイベントハンドラー内で利用することが前提で、受け... 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); /... g = mapping(42, 40, 50, 100, 200) ); console.log(g); ... -座標変換への利用 座標 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 ).toStr... for( var i = col.length; i<6; i++ ) { col = "0" + col; } return "#" + col; } RGB各8ビット、ランダムに値を選んで、16進数にして返す。 6桁に満たない場合は先頭に ''0'' を追加しています。 色を与える記述において、以下のように書いて利用します。 obj.style.backgroundColor = randomColor(); ~ ~ ***ベンダープレフィックスを取得 ベンダープレフィックスというのは、スタイルシートでプロパ... 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 ''; } })(); //即時関数を使った書き方になっています。 ~ ~ ~

ページ名: