解説
コンピューターの画面や画像データは、縦横に並んだ画素の配列で画像を表現しています。この画素の位置は、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>
出力結果
