こんばんは。きわさです。
またまたcanvas関連です。
今回は画像を回転させてみます。
1 2 3 4 5 6 7 8 | 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度、、とこれだと残像が残ってしまいます。
しかも回転する位置がイメージと違うかもしれません。
まず残像を消します。
1 2 3 4 5 6 7 8 9 10 11 12 | 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) でもとに戻しています。
次は回転の位置を変えます。
中心を軸にして回転するようにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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 の移動も元に戻しています。
サンプルを置いてみます。
