| 目次 |
|---|
|
・図形を操作する ・<canvas>要素を回転する ・<canvas>要素を移動する ・<canvas>要素を伸縮する ・<canvas>要素を一括変形する ・<canvas>要素を保存する |
<canvas>要素を回転/移動/伸縮させたり、<canvas>要素のsave/restoreさせるなどの操作が可能です。
但し、操作出来るのは描画する図形ではなく、<canvas>要素全体が操作対象となります。
rotateメソッドを使って、<canvas>要素を回転します。
回転の中心は、左上の<canvas>要素の原点となります。
回転方向は、時計回りです。
角は絶対角ではなく、相対角となります。
そのため、多段の回転を加えるときには、注意が必要です。
リスト1. 回転する
context.beginPath();
context.moveTo(80, 0);context.lineTo(200, 0);context.stroke(); //目盛り線
context.fillText("0度", 100, 0);
context.rotate(10/180*Math.PI); //10度回転
context.moveTo(80, 0);context.lineTo(200, 0);context.stroke(); //目盛り線
context.fillText("10度", 100, 0);
context.rotate(20/180*Math.PI); //+20度→30度回転
context.moveTo(80, 0);context.lineTo(200, 0);context.stroke(); //目盛り線
context.fillText("30度", 100, 0);
context.rotate(15/180*Math.PI); //+15度→45度回転
context.moveTo(80, 0);context.lineTo(200, 0);context.stroke(); //目盛り線
context.fillText("45度", 100, 0);
コーディング例
上記の例では、目盛り線のコードは、どの角度でも同じであることに注目してください。
回転しているのは、<canvas>要素の視点が回転しています。
また、rotateメソッドに関しても、相対角度の指定になっていることに注意してください。
translateメソッドを使って、<canvas>要素を移動します。
移動は、左上の<canvas>要素の原点が移動します。
移動座標は絶対座標ではなく、相対座標となります。
リスト2. 移動する
context.beginPath();
context.moveTo(0, 0);context.arc(0, 0, 5, 0, 2*Math.PI);context.fill(); //原点
context.fillText("原点(0,0)", 2, 2);
context.translate(50, 50);
context.moveTo(0, 0);context.arc(0, 0, 5, 0, 2*Math.PI);context.fill(); //移動
context.fillText("移動(+50,+50)→(50,50)", 2, 2);
context.translate(0, 50);
context.moveTo(0, 0);context.arc(0, 0, 5, 0, 2*Math.PI);context.fill(); //移動
context.fillText("移動(+0,+50)→(50,100)", 2, 2);
context.translate(200, 0);
context.moveTo(0, 0);context.arc(0, 0, 5, 0, 2*Math.PI);context.fill(); //移動
context.fillText("移動(+200,+0)→(250,100)", 2, 2);
コーディング例
上記の例では、原点(円)のコードは、どの位置でも同じであることに注目してください。
移動しているのは、<canvas>要素の視点が移動しています。
また、translateメソッドに関しても、相対位置の指定になっていることに注意してください。
scaleメソッドを使って、<canvas>要素を伸縮します。
伸縮は、<canvas>要素の原点を中心に伸縮します。
伸縮は絶対倍率ではなく、相対倍率となります。
リスト3. 伸縮する
context.beginPath();
context.moveTo(250, 90);context.lineTo(250, 100);context.lineTo(240, 100);context.stroke();
context.fillText("位置① 変形前", 245, 95);
context.scale(1.5, 1.5);
context.moveTo(250, 90);context.lineTo(250, 100);context.lineTo(240, 100);context.stroke();
context.fillText("位置② 1.5等倍", 245, 95);
context.scale(1, 0.5);
context.moveTo(250, 90);context.lineTo(250, 100);context.lineTo(240, 100);context.stroke();
context.fillText("位置③ 縦半分", 245, 95);
context.scale(0.5, 1);
context.moveTo(250, 90);context.lineTo(250, 100);context.lineTo(240, 100);context.stroke();
context.fillText("位置④ 横半分", 245, 95);
コーディング例
上記の例では、コーナーのコードでも同じであることに注目してください。
伸縮しているのは、<canvas>要素の大きさが伸縮します。
また、scaleメソッドに関しても、相対倍率の指定になっていることに注意してください。
回転(rotate)、移動(translate)、伸縮(scale)を一括して行います。
transformメソッドは、多段で行う場合は相対的に変形します。
setTransformメソッドは、絶対的な変形をします。
リスト4. 一括変形する
/* transform */
context.fillText("① 変形前", 5, 5, 150);
context.transform(1, 0, 0.5, 1, 0, 30);
context.fillText("② 下に移動しx方向に傾斜", 5, 5, 150);
context.transform(1, 0.5, 0, 1, 0, 30);
context.fillText("③ 下に移動しy方向に傾斜", 5, 5, 150);
/* setTransform */
context.setTransform(1, 0, 0, 1, 200, 0);
context.fillText("④ リセットして横に移動", 5, 5, 150);
context.setTransform(1, 0, 0.5, 1, 200, 30);
context.fillText("⑤ リセットしてx方向に傾斜", 5, 5, 150);
context.setTransform(1, 0.5, 0, 1, 200, 60);
context.fillText("⑥ リセットしてy方向に傾斜", 5, 5, 150);
コーディング例
<canvas>要素は、save/restoreメソッドを使い、現在の描画状態を保存/再現することが出来ます。
リスト5. 状態を保存する
/* 初期状態を用意 */
context.fillStyle = "red";
context.font = "20px Aral";
context.translate(50, 50);
context.fillText("①初期状態", 10, 10);
context.save();
/* 変化させる */
context.fillStyle = "blue";
context.font = "italic 20px 'ＭＳ 明朝'";
context.translate(200, 0);
context.rotate(10/180*Math.PI);
context.fillText("②変化させたもの", 10, 10);
/* 再現したもの */
context.restore();
context.fillText("③再現したもの", 10, 60);
コーディング例