さて今度は回転の話です。これはdrawImageの引数では指定できませんので、変形マトリックスを使います。これもまた2通りのやり方があります。
rotateメソッドは、簡単に回転の変形をするためのものです。transformは拡大の時も説明しましたが、引数の指定によって回転を扱うこともできます。やはり回転させるだけであれば、rotateの方が簡単です。
rotateメソッドを使って画像を回転させる
drawImageする前に、rotateメソッドで回転させるだけでOKです。引数はラジアン角の値にする必要があるので、例えば45度回転させたい場合は、 45 * Math.PI / 180 といった数を指定しなくてはなりません。
また、この変形も原点を中心に回転することになるため、そのまま実行するだけだと、画像の左上を中心に回転してしまいます。どちらかと言うと、画像を回転させると言えば、その画像の中心を軸に回転することが期待されることが多いように思いますが、そうしたい場合は、rotateの前に一旦画像の縦横の半分だけtranslateして、rotate後にまた同じだけtranslateで戻す、ということをしてあげる必要があります。
わかりやすいように、translateする場合としない場合で比較しました。後者のほうが動作として自然ではないでしょうか。
transformメソッドを使って画像を回転させる
transformメソッドの場合、第1～4までの引数に以下の様な順序で三角関数の値を入れると、回転の変形になります。
ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), 0, 0 );
また、先ほどのように画像の中心で回転させたい場合は、第5、第6引数で画像の横・縦の半分だけ移動した後、戻すところだけtranslateで変形しなおすことで実現します。
コメント