昨日の恵方の画像をHTML5 + JavaScriptで描いたということで、その辺についてちょっと書いてみる。
x-y座標と、極座標とか数学では使うけど、難しい話は無しにして、最低でも三角関数の sin と cos や、弧度法（ラジアン）は知らなければならないだろう。
以下、
var ctx = canvas.getContext('2d');
として、話を進める。
HTML5では ctx.moveTo(x,y); と ctx.lineTo(x,y); を使って、直線を描くことが出来る。
今までの私の頭のなかでは、(x, y)を中心とする長さlの放射線を描くならば、
ctx.moveTo(x, y);
ctx.lineTo(x+l*Math.cos(deg*Math.PI/180.0), y-l*Math.sin(deg*Marh.PI/180.0));
と角度degを変化させて描いたことだろう。
確かに間違いではないし、こういうことなんだろうけど、これが d=0 のときに、どの方向なのかって、数学に慣れ親しんだ人間や、ゲームプログラミングなどで使い慣れた人間にしか解りにくいだろう。
いや、慣れ親しんでいる私も頭がこんがらがるのである。
HTML5の場合、デフォルトでは原点(0, 0)は左上角にあり、右方向でxが増加し、下方向でyが増加する。
つまり、0時を0度として、時計回りに回転させたいならば、
ctx.lineTo(x+l*Math.sin(deg*Math.PI/180.0), y-l*Math.cos(deg*Marh.PI/180.0));
といったようになるのだが、やっぱり、どっちが sin で cos で、符号は + だっけ - だっけとなってしまうのである。
さて、今回の恵方の図では、文字を回転させたりしていましたね。
これも踏まえると、先のやり方では、放射線は描けても、文字の回転には使えない。
そこで ctx.rotate(rad); を使うのである。
ratateメソッドは、rad度（ラジアン）回転させたものを描いてくれるので、直線などの図形や、文字の回転に使えるわけである。
さて、そうなると回転軸の中心を左上角から移動させるのに ctx.translate(x, y); をすることになる。
24分割のあたりの実際のコードは、
var s=new Array('子','癸','丑','艮','寅','甲','卯','乙','辰','巽','巳','丙','午','丁','未','坤','申','庚','酉','辛','戌','乾','亥','壬');
ctx.translate(200, 200);
ctx.lineWidth = 1.5;
ctx.strokeStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '26pt Gothic';
ctx.beginPath();
ctx.arc(0, 0, 198, 0, 2*Math.PI, false);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 158, 0, 2*Math.PI, false);
ctx.closePath();
ctx.stroke();
for (var i=0; i<24; i++) {
ctx.beginPath();
ctx.fillText(s[i], 0, -178);
ctx.closePath();
ctx.fill();
ctx.rotate(7.5*Math.PI/180.0);
ctx.beginPath();
ctx.moveTo(0, -158);
ctx.lineTo(0, -198);
ctx.closePath();
ctx.stroke();
ctx.rotate(7.5*Math.PI/180.0);
}
こんな感じで、一切三角関数を使わずに記述できるのである。
ところで、translateメソッドも、rotateメソッドも、累積されているので、現状どうなっているのかが解りにくい。
リセットするには、setTransformメソッドを使って、単位行列を設定って、難しい話は無しだったな。
ctx.setTransform(1, 0, 0, 1, 0, 0);
これで、初期化できるんでないのかな。
まぁ、おまじないみたいなものかな。
話は変わるが、まったくHTML5を触ったことがない頃に、描画しても画像にジャギーがでていやだなぁって思ってたんですが、αチャネルで透明度を設定したら、アンチエイリアスされた感じになるのね。
まぁ、本を買ってまで勉強するって感じじゃないサンデープラグラマの戯言ですんで、よくわかってないってのが本当のところなんだろうね。
↧
HTML5+JavaScriptで回転
↧