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をくわえる場合、
href="#"としたりhref="javascript:void(0);"としたり、または代替リンク先を指定してonclickにreturn false;を付けたりもする。
例１
リンク リンク // JavaScriptが無効になっていればhoge.htmlにアクセス。有効ならばhoge()を実行。 リンク
リンク
[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回]
よくインストーラ、gemとか使ってるとコマンドラインの文字が動的に変化しますよね。
Installing...(10%)の10%のところです。
printしたら横に流れるし、\nしたら次の行行くだけだし...
これが何故変化するかわからなかったので、気になって調べました。
答えは簡単。\nじゃなくて\rを使えばよかった。
そういえば\r\nは、タイプライター時代に\rで行頭に戻って、\nで次行へ移動。みたいな感じだったという話を聞いたことがあった（かもしれない）。
ということで、\rで先頭に戻って上書きすればおｋでした。
\rする前の文字列より、\rしてからprintする文字列が短いと前の文字列が消えずに見えるので注意です。
[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回]
