ブログでHTML5 Canvas 座標変換

パスは描くときに座標変換することができます。
たとえば平行移動、回転、拡大です。

---

平行移動
ではまず平行移動から見て行きましょう。

<canvas id="drawTranslatedRectCanvas" width="300" height="200"></canvas>
<script>
    (function () {
        var canvas = document.getElementById("drawTranslatedRectCanvas");
        var context = canvas.getContext("2d");
        context.strokeRect(0, 0, 100, 50);
        context.translate(80, 80);
        context.strokeRect(0, 0, 100, 50);
    })();
</script>

context.translate(x, y);

このメソッドは平行移動を行います。
現在の座標をxとyだけずらします。

---

回転

回転を行うこともできます。

<canvas id="drawRotatedRectCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawRotatedRectCanvas");
        var context = canvas.getContext("2d");
        context.strokeRect(0, 0, 100, 50);
        context.rotate(Math.PI / 6); //30°
        context.strokeRect(0, 0, 100, 50);
    })();
</script>

context.rotate(angle);

は、回転を行います。
angleだけ回転させます。

---

拡大縮小

拡大・縮小を行うこともできます。

<canvas id="drawScaledRectCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawScaledRectCanvas");
        var context = canvas.getContext("2d");
        context.strokeRect(0, 0, 100, 50);
        context.scale(2, 2);
        context.strokeRect(0, 0, 100, 50);
    })();
</script>

context.scale(scaleWidth, scaleHeight);は、拡大を行います。
scaleWidthは横方向の拡大率。ｌ
scaleHeightは縦方向の拡大率です。