CodeZine(コードジン)

特集ページ一覧

「画素と解像度」
~マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典(79)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/05/05 14:00

解説

 画素(ピクセル)は、コンピューターの画面を構成する色情報の最小単位です。コンピューターの画面は、縦横に並んだ四角の画素の連続で構成されています。ピクセル(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>
出力結果
出力結果
フィードバックお待ちしております!

 ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:マンガで分かるプログラミング用語辞典

もっと読む

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5