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