SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

解説

 画素(ピクセル)は、コンピューターの画面を構成する色情報の最小単位です。コンピューターの画面は、縦横に並んだ四角の画素の連続で構成されています。ピクセル(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などでお気軽に編集部までお寄せください。よろしくお願いいたします。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
マンガで分かるプログラミング用語辞典連載記事一覧

もっと読む

この記事の著者

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

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8607 2015/05/05 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング