線の引き方HTML ( Canvas 活用 )          


01.XY軸の上で線を引く場合、その起点と終点を座標軸で示す必要があります。

まず、原点は(X軸0,Y軸0)に存在します。
X軸は、通常と同じく右方向に数字が増えますので、X軸上の起点は(100,0)のように示されます。
Y軸は、通常と異なり下方向に数字が増えますので、Y軸上の終点は(0,100)のように示されます。

起点(100,0)から終点(0,100)に線を引く場合は、以下のように指示します。

まず、線を引くために、横600ピクセル、縦700ピクセルのキャンバスを用意します。

キャンバスのIDは”CV”です。

★<canvas id="cv" width="600" height="700"></canvas>

スクリプトには、脚本などの意味があり、IT分野では簡易なコンピュータプログラムのことを指します。

そのプログラムの中で、「入力」⇒「処理」⇒「出力」が行われます。

「入力」する値を「引数(ヒキスウ)」、「出力」される要素を「戻り値(モドリチ)」と言います。 「getElementById」="get element by id"とは、「任意のID(ここでは”CV=canvas”)に対応するドキュメント要素を取得せよ!」と示しています。

「var cvs 」の「var」とは、コードを実行する前に、優先的に適用されるべきことを示しています。

「cvs」=”Concurrent Versions System”とはファイルの「現行最新バージョン」という意味です。

★<script>

var cvs = document.getElementById("cv");

次に、キャンパスに二次元で描くための命令が続きます。それがgetContext("2d")です。

「getContext("2d")」=”get context("2d")”とは「"2d"=二次元で結果を示せ!」と示しています。

「id」で「element」を「get」して、「2d」の「context」を「get」せよ!、という指示です。

★var ctx = cvs.getContext("2d");

「path」とは「小路」の意味ですが、IT分野では、コンピュータ内の特定情報の所在を表す文字列のことです。

「beginPath()」の指示で、現在、残っているかもしれないパスをクリアにし、作業開始を告げます。

そして、「moveTo(100,0)」で線引きの座標上での起点座標(100,0)を決め、「lineTo(0,100)」で終点座標(0,100)を決めます。

最後に、「stroke()」で、作業を終了させ、結果を出します。

★ctx.beginPath(); // 1.Pathで描画を開始する
★ctx.moveTo(100,0); // 2.描画する位置を指定する
★ctx.lineTo(0,100); // 3.指定座標まで線を引く
★ctx.stroke(); // 4.Canvas上に描画する



02.座標軸上の三点(174,260)(274,104)(224,254)を頂点とする三角形の作図は、以下の通りです。

<canvas id="cv" width="600" height="700"></canvas>

<script>

var cvs = document.getElementById("cv");
var ctx = cvs.getContext("2d");

01
ctx.beginPath(); // 1.Pathで描画を開始する
ctx.moveTo(174,260); // 2.描画する位置を指定する
ctx.lineTo(274,104); // 3.指定座標まで線を引く
ctx.stroke(); // 4.Canvas上に描画する

02
ctx.beginPath(); // 1.Pathで描画を開始する
ctx.moveTo(274,104); // 2.描画する位置を指定する
ctx.lineTo(224,254); // 3.指定座標まで線を引く
ctx.stroke(); // 4.Canvas上に描画する

03
ctx.beginPath(); // 1.Pathで描画を開始する
ctx.moveTo(224,254); // 2.描画する位置を指定する
ctx.lineTo(174,260); // 3.指定座標まで線を引く
ctx.stroke(); // 4.Canvas上に描画する

</script>



03.02で01、02、03と一本ずつの線引きで作った作図も、以下の方法で纏めて三角形を作ることも出来ます。

ctx.beginPath(); // 1.現在のパスをリセットする
ctx.moveTo(174,260); // 2.パスの開始座標を指定する
ctx.lineTo(274,104); // 3.座標を指定してラインを引く(一本目の線)
ctx.lineTo(224,254); // 4.座標を指定してラインを引く(二本目の線)
ctx.closePath(); // 5.パスを閉じる(三本目の線を引いて図形を閉じる)
ctx.stroke(); // 6.Canvas上に描画する



04.因みに、ゆっくりと線引きしていく作図も試みましたが、分りませんでした。

忙しい昨今、「ゆっくり」は求められず、即座の作図が求められるので、当然と言えば当然でした。残念!



05.最後に、顔認証の多角形のサンプルをパソコン上で作画して見ました。

作画の手順は次の通りです。

01.紙ベースの多角形のサンプルを用意する。
02.そのサンプルの下にグラフ用紙を置き、ホッチキスでサンプルと留める。
03.紙ベースのサンプルの多角形の角々に、錐で穴を開ける。
04.ホッチキスを取ると、グラフ用紙に複数の穴が開いているのが分る。
05.グラフ用紙の複数の穴の場所のX座標、Y座標の数値を把握する。
06.三角形を、極力一筆書きとなるように繋げている。
07.データを、線引きのプログラムに落とし込む。

では、ご覧下さい。





[ ★Canvasリファレンス ]

[ 「直線・多角形を描く」のサイト ]

[ 2021年以降:デイリー 目次 ]


inserted by FC2 system