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

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

<canvas id="drawInversedImageCanvas" width="300" height="200"></canvas>
<script 
    type="text/JavaScript" 
    src="http://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="http://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の縦幅を表します。