ブラウザ: Firefox 6.0.2
OS: Mac OS X 10.5.6
HTML5ではcanvas画像のピクセル列を書き換えることができます。
画素のRGBAの値をJavaScriptで読み書きすることで実現します。
1. 基本的な流れ
ピクセル値を書き換える操作の基本的な流れは以下のようになります。- ImageDataオブジェクトの取得
- 画素データ列への書き込み
- canvasのコンテキストへ反映
2. ImageDataオブジェクト
canvasのピクセル値を操作するにはImageDataオブジェクトを利用します。このオブジェクトのプロパティを書き換えることで、ピクセル列を書き換えます。ImageDataオブジェクトは以下のプロパティを持ちます。
- width 画像の幅
- height 画像の高さ
- data 画素データの1次元配列。RGBAの順番で値が格納される。
dataプロパティは、画素値を格納する1次元配列です。画像の左上からR(赤)、G(緑)、B(青)、A(不透明度)の順番に画素の値が並んでいます。
3. getImageData(x, y, width, height)
canvasの(x, y)から幅width、高さheightの領域をImageDataオブジェクトとして取得します。canvasのコンテキストからImageDataオブジェクトを取得するために、getImageDataメソッドを使います。
4. putImageData(imagedata, x, y)
ImageDataオブジェクトをcanvasのコンテキストに反映させます。反映させるcanvas上の位置を(x, y)で指定します。※getImageDataで取得したオブジェクトのピクセルを書き換えても、このメソッドで反映させるまでは、canvasには反映されません。
5. サンプル
縦横100pxの画素を全て赤にした例です。<!DOCTYPE html>
<html>
<head>
<title>pixel</title>
<script type="text/javascript">
<!--
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = context.getImageData(0, 0, 100, 100);
for (var i = 0; i < image.height; i++) {
for (var j = 0; j < image.width; j++) {
image.data[(i * image.width + j) * 4 + 0] = 255;
image.data[(i * image.width + j) * 4 + 1] = 0;
image.data[(i * image.width + j) * 4 + 2] = 0;
image.data[(i * image.width + j) * 4 + 3] = 255;
}
}
context.putImageData(image, 0, 0);
}
-->
</script>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
</body>
</html>
<html>
<head>
<title>pixel</title>
<script type="text/javascript">
<!--
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = context.getImageData(0, 0, 100, 100);
for (var i = 0; i < image.height; i++) {
for (var j = 0; j < image.width; j++) {
image.data[(i * image.width + j) * 4 + 0] = 255;
image.data[(i * image.width + j) * 4 + 1] = 0;
image.data[(i * image.width + j) * 4 + 2] = 0;
image.data[(i * image.width + j) * 4 + 3] = 255;
}
}
context.putImageData(image, 0, 0);
}
-->
</script>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
</body>
</html>
以下は実行結果です。