ブログで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は縦方向の拡大率です。

ブログでHTML5 Canvas クリア

クリア

ここまでは描いたきり何もしませんでした。
ここでは描いたものを消しましょう。

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

このプログラムはキャンバス全体をまず黒で塗りつぶします。
その後真ん中をクリアします。

context.clearRect(x, y, width, height);

は、長方形の領域をクリアします。
xはクリアする長方形の左上のx座標です。
yはクリアする長方形の左上のy座標です。
widthはクリアする長方形の横幅です。
heightはクリアする長方形の縦幅です。

ブログでHTML5 Canvas コンテキストの保存とリストア

コンテキストの保存とリストア

コンテキストの状態を保存したい時があります。
たとえば、fillStyleなどの値です。
現在のコンテキストを保存しておいて、後で使いたい場合というケースはあるものです。

<canvas id="drawSaveRestoreDemoCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawSaveRestoreDemoCanvas");
        var context = canvas.getContext("2d");
        context.save();
        context.fillStyle = "rgb(0, 0, 255)";
        context.fillRect(0, 0, 100, 50);
        context.restore();
        context.fillRect(0, 50, 100, 50);
    })();
</script>

このケースでは、最初fillStyleの値は黒です。
context.save()して、fillStyleの現在の値を保存します。
fillStyleを一時的に青にします。
青で長方形を描きます。
リストアしてさっき保存したfillStyleの値（黒）に戻します。
黒で長方形を描きます。

青と黒の長方形が描けました！

ブログでHTML5 Canvas クリップ

クリップ

何かを描く時、描く範囲を制限したい時があります。
それがクリッピングです。

<canvas id="drawClippedRectangleCanvas" width="300" height="300"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawClippedRectangleCanvas");
        var context = canvas.getContext("2d");
        context.rect(100, 100, 200, 200);
        context.stroke();
        context.clip();
        context.fillRect(0, 0, 200, 200);
    })();
</script>

context.clip()を呼ぶと、その後、それまでのパスの内部でしか描かれなくなります。
例えばこのサンプルでは、(100, 100, 200, 200)の正方形でクリップしています。
その正方形の内部にしか今後描かれなくなっている、ということです。
そのため(0, 0, 200, 200)の正方形を描いても、その一部しか描かれていないというわけですね。

ブログでHTML5 Canvas テキスト

テキストの描画
テキストを描くこともできます。

<canvas id="drawTextCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawTextCanvas");
        var context = canvas.getContext("2d");
        context.fillText("Hello world!", 20, 30);
    })();
</script>

context.fillText(text, x, y, maxWidth);

textはキャンバスに描かれるテキストです。
xはテキストが描かれはじめるx座標です。
yはテキストが描かれはじめるy座標です。
maxWidthはテキストのピクセル数の最大横幅です。これはオプションです。

---

フォント
フォントを変更することもできます。

<canvas id="drawFontChangedTextCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawFontChangedTextCanvas");
        var context = canvas.getContext("2d");
        context.font = "30px Arial";
        context.fillText("Hello world!", 20, 30);
    })();
</script>

context.fontプロパティは、フォントを設定します。

---

テキストの横幅
テキストの横幅を測ることができます。

<canvas id="drawMeasuredTextCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawMeasuredTextCanvas");
        var context = canvas.getContext("2d");
        context.font = "30px Arial";
        var text = "Hello World!";
        var size = context.measureText(text);
        context.fillRect(0, 0, size.width, 30);
        context.fillStyle = "rgb(0, 255, 255)";
        context.fillText(text, 0, 30);
    })();
</script>

context.measureText(text).widthは、テキストの横幅を表します。