ブログでHTML5 Canvas ピクセル操作

ここまではメソッドを使って図形を描いて来ました。
しかしピクセル単位で絵を描きたいこともあるでしょう。
ここでは、あるピクセルの色を取得し、あるピクセルに色を書き込む方法を紹介します。

<canvas id="drawInversedImageCanvas" width="300" height="200"></canvas>
<script 
    type="text/JavaScript" 
    src="https://blog.cnobi.jp/v1/blog/user/118c300f2ee0ad311e5962b0167205f5/1371278164">
</script>

drawInversedImage.js

(function() {
    var canvas = document.getElementById("drawInversedImageCanvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "rgb(0, 0, 255)";
    context.fillRect(0, 0, 100, 100);
    context.strokeStyle = "rgb(255, 255, 255)";
    context.strokeRect(10, 10, 80, 80);
    var imageData = context.getImageData(0, 0, 100, 100);

    for (var i = 0; i < imageData.data.length; i += 4) {
        var max = 255;
        imageData.data[i + 0] = max - imageData.data[i + 0];
        imageData.data[i + 1] = max - imageData.data[i + 1];
        imageData.data[i + 2] = max - imageData.data[i + 2];
        imageData.data[i + 3] = max;
    }

    context.putImageData(imageData, 100, 0);
})();

このプログラムは左に描いた画像を、右にコピーしています。
ただし、白と黒が反対になっています。

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

getImageDataはImageDataオブジェクトを返します。
つまり、指定した矩形エリアのピクセルデータを返すわけです。

xは指定するエリアの左上のx座標。
yは指定するエリアの左上のy座標。
widthは指定するエリアの横幅。
heightは指定するエリアの縦幅です。

---

イメージデータを作成

イメージデータを0から作り出すこともできます。

<canvas id="drawWaveCanvas" width="300" height="200"></canvas>
<script 
    type="text/JavaScript" 
    src="https://blog.cnobi.jp/v1/blog/user/118c300f2ee0ad311e5962b0167205f5/1371278220">
</script>

drawGradationManually.js

(function() {
    var canvas = document.getElementById("drawGradationManuallyCanvas");
    var context = canvas.getContext("2d");
    var size = { width: 200, height: 100 };
    var imageData = context.createImageData(size.width, size.height);

    for (var x = 0; x < size.width; x++) {
        for (var y = 0; y < size.height; y++) {
            var pixelIndex = x + y * size.width;
            var dataIndex = pixelIndex * 4;
            var max = 255;
            imageData.data[dataIndex + 0] = max * x / size.width;
            imageData.data[dataIndex + 1] = max * y / size.height;
            imageData.data[dataIndex + 2] = max;
            imageData.data[dataIndex + 3] = max;
        }
    }

    context.putImageData(imageData, 0, 0);
})();

このプログラムは右に行くほど赤く、下に行くほど緑になる画像を表示します。

context.createImageData(width, height);

widthは、新しく作られるImageDataの横幅を表します。
heightは、新しく作られるImageDataの縦幅を表します。

ブログで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)の正方形を描いても、その一部しか描かれていないというわけですね。