JavaScript/SampleFunction

JavaScript｜Sample Function

JavaScriptプログラミングで活用できる小さな関数のコレクション
プログラミングの参考に、随時追加しています。

CONTENTS

• CANVAS 上のマウス座標を得る
• マッピング
• ラジアン・角度変換
• 現在時刻を hh:mm:ss 形式で返す
• ランダムな色を発生させる
• ベンダープレフィックスを取得

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 '';
   }
})();