JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5 Canvasのtranslate()メソッドで座標原点を移動する方法

HTML5のCanvasでは、translate(x, y)メソッドを使うことで、キャンバスの描画起点（原点）をグリッド上の別の位置へ移動できます。図形を複数の位置に効率よく描画したい場合に非常に便利な機能です。

translate()メソッドの基本

translate()メソッドは2つの引数を受け取ります。

  • x：キャンバスを左右に移動する量（正の値で右、負の値で左）
  • y：キャンバスを上下に移動する量（正の値で下、負の値で上）

このメソッドを実行すると、その後の描画処理はすべて移動後の新しい原点を基準に行われます。なお、移動前の状態に戻したい場合は、save()で状態を保存し、restore()で復元するのが一般的です。

サンプルコード

以下の例では、translate()とスピログラフ（サイクロイド曲線）を組み合わせて、3×3のグリッド状に9つの幾何学模様を描画しています。

<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width:100px;
height:100px;
margin:0px auto;
}
</style>

<script>
function drawShape(){
// DOMからcanvas要素を取得
var canvas = document.getElementById('mycanvas');

// canvasがサポートされていない場合は実行しない
if (canvas.getContext){
// 描画用にコンテキストを取得
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,300,300);
for (i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) {
ctx.save();
ctx.strokeStyle = "#FF0066";
ctx.translate(50+j*100,50+i*100);
drawSpirograph(ctx,10*(j+3)/(j+2),-2*(i+3)/(i+1),10);
ctx.restore();
}
}
} else {
alert('このデモを見るにはSafariまたはFirefox 1.5+が必要です。');
}
}

function drawSpirograph(ctx,R,r,O){
var x1 = R-O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1,y1);
do {
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72));
var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72));
ctx.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R-O && y2 != 0 );
ctx.stroke();
}
</script>
</head>

<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas" width = "400" height = "400"></canvas>
</body>
</html>

コードのポイント解説

1. 原点の移動とループ処理

ctx.translate(50+j*100, 50+i*100)により、二重ループごとに原点が横方向・縦方向に100ピクセルずつずらされます。これにより、同じ描画関数を呼び出すだけで、異なる位置に模様を配置できます。

2. save()とrestore()による状態管理

各ループの冒頭でctx.save()を呼び出して現在の変換状態を保存し、描画後にctx.restore()で元に戻しています。これを行わないと、translate()による移動が累積してしまい、意図した位置に描画できなくなります。

3. スピログラフ関数について

drawSpirograph()関数は、三角関数（Math.cos・Math.sin）を用いてスピログラフ特有の美しい曲線を計算し、lineTo()で連結しながら描画します。無限ループを防ぐため、反復回数が20,000を超えた時点で処理を打ち切る安全策も組み込まれています。

まとめ

translate()メソッドを活用すれば、描画コードをシンプルに保ちながら、複雑なレイアウトや繰り返しパターンを簡単に実現できます。rotate()やscale()といった他の変換メソッドと組み合わせることで、さらに表現力豊かなグラフィックスを描くことが可能になります。

  1. HTML5 Canvasを使って線を描く方法をわかりやすく解説

    HTML5 CanvasとはHTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、図形描画やデータビジュアライゼーションなど、幅広い用途で活用されています。線を描く場合は、Canvas APIが提供するlineTo()メソッドを使用します。基本的な流れは以下の通りです。beginPath()で新しいパスを開始するmoveTo(x, y)で線の始点を指定するlineTo(x, y)で線の終点（次の点）を指定するstroke()でパスを実際に描画するHTML5 Can

  2. HTML5のCanvasで画像を描画する方法【drawImage()の使い方を解説】

    HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックスやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、ブラウザ上で動的なビジュアル表現を実現できます。 HTML5キャンバスで画像を扱うには、drawImage()メソッドを使用します。このメソッドは、指定した画像をキャンバス上にそのまま描画します。 drawImage()メソッドの基本構文と引数 drawImage()メソッドの基本的な呼び出し形式は次の通りです。 ctx.drawImage(img, x, y); 各引数の意味は以下の通りです。 img：