JavaScriptのCanvas APIのscale()メソッドを使い、キャンバスを座標変換する方法を解説します。

目次 [ close ]
  1. 下準備
  2. scale()メソッドでキャンバスを座標変換

下準備

まずは下準備から。htmlの<body></body>内に以下のcanvas要素を配置します。

<canvas id="canvas"></canvas>

jsにてコンテキストを取得します。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas

画像ではキャンバスの範囲がわかりやすいようにcssにて背景色を設定してあります。

scale()メソッドでキャンバスを座標変換

まずは矩形を描画します。

ctx.strokeRect(10, 10, 40, 40);

scale()メソッドを使うと、キャンバスの座標空間を拡大、縮小することができます。最終行に以下のコードを追加します。

ctx.scale(2, 2);
ctx.strokeRect(10, 10, 40, 40);

scale(x, y)の形式で引数にx、y方向の拡大率を指定すると座標空間が変倍され、指定した倍率で描画されます。この例ではx、y共に2を指定しているため、矩形は2倍の大きさで描画され、線の太さも2倍に、描画位置も原点から2倍の距離離れた場所に描画されています。