解説
画素(ピクセル)は、コンピューターの画面を構成する色情報の最小単位です。コンピューターの画面は、縦横に並んだ四角の画素の連続で構成されています。ピクセル(pixel)は、picturesの短縮形pixとelementのelの造語です。
また、似たような言葉に、ドットがあります。こちらは、画像の出力装置が表現できる最小単位です。出力装置側の単位なので、1つのピクセルを複数のドットで表現することも可能です。ただ、より精細に画面を表現するために、1ピクセルを1ドットで表現していることが多いです。
コンピューターの画面や、プリンタの精細さの単位は、dpi(ドット・パー・インチ)が使われることが多いです。このdpiは、1インチ(2.54cm)に、どれだけのドットが並んでいるかを表します。また、コンピューターの画面の場合は、ppi(ピクセル・パー・インチ)が用いられることもあります。このような値のことを解像度と呼びます。
Windowsパソコンの画面は、96dpi~192dpiぐらいが多いです。紙に印刷する場合は、カラーでは300dpi以上、白黒では600dpi以上なら、自然に見えると言われています。
サンプル
画素を操作するコードを、JavaScriptで簡単に書いてみます。
まだ説明していない概念が多数出てくるコードですが、imgDtの値を操作することで、画素の色を書き換えています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>「画素操作」のサンプル</title> </head> <body> <canvas id="cnvs" width=256 height=256></canvas> <script type="text/javascript"> var cnvs = document.getElementById("cnvs"); var ctx = cnvs.getContext("2d"); var img = ctx.getImageData(0, 0, cnvs.width, cnvs.height); var w = img.width, h = img.height; var imgDt = img.data; // 色を設定 for (var y = 0; y < h; y ++) { for (var x = 0; x < w; x ++) { // 基本位置 var pos = (y * w + x) * 4; // 順に赤色、緑色、青色を0~255で指定 imgDt[pos + 0] = Math.floor(255 / h * y); imgDt[pos + 1] = Math.floor(255 / w * x); imgDt[pos + 2] = Math.floor(255 / h * y); // 透明の設定(255で表示~0で非表示) imgDt[pos + 3] = 255; } } ctx.putImageData(img, 0, 0); </script> <input type="button" value="To Image" onClick=" var imgUrl = cnvs.toDataURL(); window.open(imgUrl, '_blank'); "> </body> </html>