CodeZine(コードジン)

特集ページ一覧

「座標と原点」
~マンガでプログラミング用語解説

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

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

解説

 コンピューターの画面や画像データは、縦横に並んだ画素の配列で画像を表現しています。この画素の位置は、X軸とY軸の座標で表現されることが多いです。

 その際、左上を原点として、右方向にX軸の値を増加していき、下方向にY軸の値を増加していきます。

 この座標のX軸の値は、0から始まり、横幅-1の値まで続きます。Y軸の値は、0から始まり、高さ-1の値まで続きます。

サンプル

 「座標と原点」を表現するコードを、JavaScriptで簡単に書いてみます。

<!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");

            // 全体を塗りつぶし
            ctx.fillStyle = "#ffff8f";
            ctx.fillRect(0, 0, 256, 256);

            // 原点(x=0, y=0)から横幅100、高さ200の矩形を描く
            ctx.strokeStyle = "black";
            ctx.strokeRect(0, 0, 100, 200);

            // x=60, y=25から横幅100、高さ200の矩形を描く
            ctx.strokeStyle = "red";
            ctx.strokeRect(60, 25, 100, 200);

            // x=120, y=50から横幅100、高さ200の矩形を描く
            ctx.strokeStyle = "blue";
            ctx.strokeRect(120, 50, 100, 200);
        </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