html5のcanvasで、変換マトリックスを設定する関数の説明はたくさんあるのに、
それを初期化する関数がなかった。
rotateとかtransform,translateしたあとその変換マトリックスを初期化（つまりなにも変換しなくなる）する方法をメモ。
まず、変換マトリックスの実体は行列である。
変換する際、その行列を掛けて座標を計算していると考えられるので、単に単位行列を指定すればよい。
変換マトリックスを設定する関数はsetTransformなので、
その仕様に従って単位行列を作ると
setTransform(1,0,0,1,0,0)
こうなる。
つまり、context.setTransform(1,0,0,1,0,0)を実行すれば変換マトリックスは初期化され、なにも変換しなくなる。
参考
http://www.html5.jp/canvas/ref/method/setTransform.html
http://www.html5.jp/canvas/ref/method/transform.html
http://himaxoff.blog111.fc2.com/blog-entry-85.html
[0回]
JavaScriptでカラーコードをHEXからRGBにしたり、その逆を行ったりすることは良くあると思います。
その際に"#"を削除したりと、何度か文字列処理を行います。
文字列処理は比較的重い処理なので、出来れば高速なメソッドを使用したいものです。
そこで、今回はどの方法が一番早いかを検証してみました。
今回検証したのは
・substrを使う方法
・replaceを使う方法
・split,joinを使う方法
です。
検証は、以下のプログラムで行いました。
t = "#ff8000";
c = 1000000;
function fnc1(){
var h = t.substr(1,6);
return parseInt("0x"+h);
}
function fnc2(){
return parseInt(t.replace("#","0x"));
}
function fnc3(){
return parseInt(t.split("#").join("0x"));
}
var st = (new Date()).getTime();
for(var n=0;n<c;n++){
fnc1();
}
console.log("1: "+String((new Date()).getTime() - st));
var st = (new Date()).getTime();
for(var n=0;n<c;n++){
fnc2();
}
console.log("2: "+String((new Date()).getTime() - st));
var st = (new Date()).getTime();
for(var n=0;n<c;n++){
fnc3();
}
console.log("3: "+ String((new Date()).getTime() - st));
全体的にやっつけ感満載ですが、お許しを。[0回]
JavaやRubyには、配列を操作し、それぞれの要素を個別に処理するfor-each文がある。
Javaは詳しく知らないが、Rubyではa.each{}で使える。
そこで、JavaScriptにもないかと探していたところ、あまり情報がないようだがforEachというものがあった。
t = 0;
a = [1,2,1,2,1,2,1,1,1,3,10];
a.forEach(function(e){ t+=e;});
alert(t); // 25
使い方は簡単。
t = 0;
a = [1,2,1,2,1,2,1,1,1,3,10];
a.forEach(function(e){ if(e==2)return; t+=e;});
alert(t); // 19
[1回]
いままでなんとなくクラスのメンバ（インスタンス変数）を定義するときに
var Test = function(){
this.hello = unk;
};
var a = new Test();
alert(a.hello);
としてきた。
var Test = function(){
var hello = unk;
};
var a = new Test();
alert(a.hello);
こう書いていた。[0回]
JavaScriptには、変数の方を取得するための手段として、typeofが準備されていますが、
こいつが不便で配列も連想配列(hash)もどちらも"object"と判定します。
配列か連想配列かの判定はできないのです。
ということで、配列ならarray,連想配列ならhash,その他ならそのままtypeofの値を戻す関数を作りました。
classOf:
function classOf(obj){
if((typeof obj)=="object"){
if(obj.length!=undefined)return "array";
else{for(t in obj){
if(obj[t]!=undefined)return "hash";
else return "object";
}}
}else return (typeof obj);
}
a = [0,1,2,3,4,5];
document.write(typeof a);// object
document.write(classOf(a));// array
b = {"a":"A", "b":"B"};
document.write(typeof b);// object
document.write(classOf(b));// hash
[2回]
