Javascriptでcanvas画像を回転させる

こんばんは。きわさです。

またまたcanvas関連です。
今回は画像を回転させてみます。

function test1() {
    var img = document.getElementById("image");
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.rotate(5 * Math.PI / 180);
    context.drawImage(img, 0, 0, canvas.width, canvas.height);
    return;
}

context.rotate(5 * Math.PI / 180) で指定した分だけ回転させます。
ただ、画像を回転させるわけではないので、回転後に描画処理が必要です。

test() を呼び出すと5度右回転した画像が表示されます。
もう一度押すとさらに5度、、とこれだと残像が残ってしまいます。
しかも回転する位置がイメージと違うかもしれません。

まず残像を消します。

var angle = 0;
function test2() {
    var img = document.getElementById("image");
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
    angle += 5;
    context.rotate(angle * Math.PI / 180);
    context.drawImage(img, 0, 0, canvas.width, canvas.height);
    context.rotate(-angle * Math.PI / 180);
    return;
}

回転して描画する前に、context.clearRect(0, 0, canvas.width, canvas.height) でcanvasをクリアしています。
これだと2度目以降は回転した領域をクリアしてしまうので、描画後に context.rotate(-angle * Math.PI / 180) でもとに戻しています。

次は回転の位置を変えます。
中心を軸にして回転するようにします。

var angle = 0;
function test3() {
    var img = document.getElementById("image");
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
    angle += 5;
    context.translate(canvas.width/2, canvas.height/2);
    context.rotate(angle * Math.PI / 180);
    context.drawImage(img, -canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
    context.rotate(-angle * Math.PI / 180);
    context.translate(-canvas.width/2, -canvas.height/2);
    return;
}

回転の前に context.translate(canvas.width/2, canvas.height/2) を追加しました。
これでcanvasの長さの半分だけ移動してから回転させることで、中心を軸に回転しています。
そして、描画はcanvas内で行いたいので、移動分だけ描画位置をずらしています。
描画後には translate の移動も元に戻しています。

サンプルを置いてみます。