「文脈で管理される座標集合」ってなに？

Question

javascript逆引きレシピ初版の362頁にて

キャンバスに直線を描画したい

パス(path)を利用します。パスとは、コンテキストで管理される座標集合のこと。

CanvasAPIでは、パスで管理された座標に従って、直線や曲線を描画、あるいは該当の領域を塗りつぶすことになります。

コンテキストは、こちらの通り解釈すると文脈とあるので、文脈で管理される座標集合となります。
座標なら理解できますが、文脈と集合が付くことで理解できなくなります。この文脈で管理される座標集合とは何なのでしょうか。

Answer 1

前も申しましたが「コンテキスト」即ち「文脈」と言う言葉そのものにさほど意味はありません. **「グラフィックの状態を管理するもの」とか「一連の操作」**程度のものと考えて下さい.

NOTE:
和訳された言葉の元々の意味に引きずられて納得し難いのは判ります. が, そこに囚われては先に進めません. こういうものはもっとcanvas機能について理解を深めた後に直感的に「なるほど, やっぱcontextしかねーよな」とひらめくものです.

---

まずcanvas要素に限らず, (一般的なスクリーンに描画しうる)グラフィックとは**「座標と色の対応の集合」**である点に着目して下さい.

canvas要素にグラフィックを描く際に, 2Dコンテキスト(CanvasRenderingContext2D)を選択した場合, 2Dコンテキストは下記の手法でグラフィックをcanvas要素に描きます.

• canvasグラフィック上に左上を原点とする座標平面を定義します.
• この座標平面上にパス図形と呼ばれる領域を決めます.（描画対象となる座標集合の定義）
• パス図形に沿って線を引いたり図形を塗りつぶしたりします.（座標集合に対して色を指定する＝ペイント処理）

この意味はコードで見た方が判りやすいでしょう.

//canvas要素を取得する
const canvas = document.getElementByID("canvas");
canvas.width = 200; canvas.height = 200;

//2Dコンテキストを選択する
const ctx = canvas.getContext("2d");

//パス図形を定義する＝座標集合
//2Dコンテキストオブジェクトのメソッドを呼び出している
//・・・これらは全て2Dコンテキスト内で管理されている
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100,50);
ctx.lineTo(100,100);
ctx.lineTo(50,100);
ctx.closePath();

//パス図形に沿って図形を描く
ctx.stroke();//線を引く
ctx.fill();//塗りつぶす

このように, 2Dコンテキストでは図形が2Dコンテキスト内部で管理されています. これが「文脈で管理される座標集合」の真意です.

---

座標と色の対応の集合

というのは、例えば(x,y)という部分に赤色、(a,b)という部分に白色という各々の座標に対しての色の対応というか指定が合って、それが集合したものがグラフィック、つまり画像であるという認識であっておりますか。

はい, そのとおりです.
いまあなたが目にしているディスプレイに表示されているものがグラフィックであり, よく目を凝らしてみると, 微細な色の着いた点の集まり(集合)であることが判るでしょう.

この座標平面上にパス図形と呼ばれる領域を決めます.（描画対象となる座標集合の定義）

パス図形というのは下記のような画像を想像したのですが、座標集合というのは、x,yで表せられるいくつかの座標を線(パス)で結び形にしたもののことを言っているのでしょうか。
http://www.coprosystem.co.jp/tipsblog/img/img_tips_131018_12.jpg
間違っておったら申し訳ありません。

はい, そのとおりです.

• この座標集合に沿ったグラフィック(線)＝strokeメソッド,

内部の塗りつぶし＝fillメソッド

となります

また重ね重ね申し訳ありませんが、座標集合というのは、質問文に記載してる書籍の造語なのでしょうか。それとも確固たる用語なのでしょうか。

初等数学(中学校数学/高校数学)における「座標」と「集合」の概念を組み合わせて使っている（座標の集まり）だけで, ほぼ常識の範疇の用語です.

NOTE:
コンピュータグラフィックを扱う分野では様々な用語や概念を数学分野から引用しているため, 難解な用語が出てきた場合は, 必ず背景に数学的な裏付けがあるものとお考え下さい.

Comments

[defghi1977]

確かに「context」ってイメージし難いです. Web Audio APIにもオーディオコンテキストと呼ばれる概念があって, これは音声を操作するためのAPIセットを指します. また, WebブラウザにおけるJavaScriptの動作環境を敢えてwindowコンテキストとかworkerコンテキストと表現することもあります.
どうやら「何かの作業を行う上で一通り用意されているもの」を表す概念なのかもしれません. で, それは時と場合によって変化するので日本語では「文脈」とか「環境」 となる…のかもしれません.

[ozwk]

stackoverflowにプログラミング用語としての"context"の意味はなにか?というトピックがありました
https://stackoverflow.com/questions/6145091/the-term-context-in-programming

[aaaaaaaa]

ご回答ありがとうございます。

>>座標と色の対応の集合
というのは、例えば(x,y)という部分に赤色、(a,b)という部分に白色という各々の座標に対しての色の対応というか指定が合って、それが集合したものがグラフィック、つまり画像であるという認識であっておりますか。

>>この座標平面上にパス図形と呼ばれる領域を決めます.（描画対象となる座標集合の定義）
パス図形というのは下記のような画像を想像したのですが、座標集合というのは、x,yで表せられるいくつかの座標を線(パス)で結び形にしたもののことを言っているのでしょうか。
http://www.coprosystem.co.jp/tipsblog/img/img_tips_131018_12.jpg
間違っておったら申し訳ありません。

また重ね重ね申し訳ありませんが、座標集合というのは、質問文に記載してる書籍の造語なのでしょうか。それとも確固たる用語なのでしょうか。

[m.ts10806]

aaaaaaaaさん　解決したように見えませんが、解決済みとして良いのでしょうか。

[退会済みユーザー]

ozwkさんのコメントの補足みたいなものですが、過去にteratailでも「コンテキストとは？」という質問がされていました。...ん？
https://teratail.com/questions/75347

[defghi1977]

ああ, 一旦納得済みのコンテキストへの理解がcanvasの”コンテキスト”の出現でぶっこわされて混乱したと.
コンテキストとは「何らかの処理に対して, その処理をとりまく環境・状態・前後関係と言ったもの全体」なので, canvasではグラフィック操作に関わる一連のAPIに「context」の名を冠している...ということなんでしょうね

[aaaaaaaa]

mts10806さん、疑問はおかげさまで解決しましたが何か問題があるのでしょうか。どうしても見当がつきませんが。

[m.ts10806]

aaaaaaaa さんが01/17 19:25に書いたコメントで色々と追加で質問・確認事項を入れていてそれに対する回答やコメントが付く前に「解決済み」となったためです。

[aaaaaaaa]

ご返答ありがとうございます。
追加の質問に関するご回答は、defghi1977さんの回答文にて追記というかたちで行われています。
とても分かりやすい回答で助かりました。

[m.ts10806]

なるほど。失礼しました。

Answer 2

英語をそのまま日本語にしようとするから理解が進まないのではないでしょうか。
「意味」は「自国語になおした場合の言葉そのもの」ではなく「考え方や概念そのもの」まで見ないと理解は進みません。
ITの世界や小池都知事のコメントにはよくこの手の英語がでてきますが、無理やり存在する日本語に訳して単語だけ見せられてもピンと来ませんよね？
それと同じです。

提示されている質問の回答をきちんと読んで、「どういうものか」を理解するように努めてください。

Comments

[maisumakun]

ちょっと思い出したもので、こんなことがありました。

http://download.nust.na/pub6/mysql/doc/refman/5.1/ja/archive-storage-engine.html

この文章の最初の方に「ARCHIVE ストレージエンジンはMySQLの2極分布に含まれています。」とありますが、それでは何のことだかさっぱり理解できないでしょう。

英文では「binary distribution」となっているので、ようやく「バイナリ配布」という意味なんだなと理解できました。この用法での「バイナリ」をそれ以上に訳すことは通常行いませんし、「2極分布」と訳しうる「binary distribution」は、物理学の世界の用語です。

[m.ts10806]

辞書を引いたあとに出てきた言葉に対して辞書を引くことなり、そのうち結局本質から離れていくのが常ですね。

Answer 3

こんにちは。

恐らく下記で解説されているパスと同じものと思います。

イラストレーターのパスデータとは？画像とパスの違いについて

「コンテキスト → 文脈 → 脈 → 連なり続くさま」というあまりIT業界では見かけない用語の使い方をしていそうです。
しかし、そもそも英語のContextにそのようなニュアンスあるのかな？

Answer 4

窓たちでは何か柔らかい服を起動すると大抵は窓が開きます。
主な窓にはしばしば教科書箱や無線箱がありますが、それらの箱も窓の一種です。
ネズミは便利ですね。

追記

言葉の意味は文脈で変わります。
一部だけ拾い読みするのではなく、前後をちゃんと読み、その文脈でその言葉は何を意味しているのかを捉えましょう。