線の引き方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年以降:デイリー 目次 ] | ||