Qiitaでのんびり連載をしたいけど、そんな機能あるんだろうか。。。
とりあえずJavaScriptを使ってcanvasに線を引く方法を調べました。
まずcanvasタグを置いて
<canvas id="canvas" width="200" height="200"></canvas>
次にgetElementByIdで設置したcanvasを取得。(*1)
次にgetContextで描画機能を有効にして、(*2)
beginPathを使いパスをリセット。(*3)
X座標とY座標を使いmoveToで始点を決めて・・(*4)
lineToで始点の終点を設定し、(*5)
最後にstrokeとすると線が引けるそうです。(*6)
can=document.getElementById("canvas"); // *1
ct=can.getContext("2d"); // *2
ct.beginPath(); // *3
ct.moveTo(0,100); // *4
ct.lineTo(200,100); // *5
ct.stroke(); // *6
実行結果(縦200ピクセル、横200ピクセルのキャンバスの真ん中に水平線が引けました。)
なるほど!
ちなみにlineToを増やすと線が増えるそうです。
can=document.getElementById("canvas");
ct=can.getContext("2d");
ct.beginPath();
ct.moveTo(0,100);
ct.lineTo(200,100);
ct.lineTo(100,0); //←ここを増やした!
ct.lineTo(0,100); //←ここも増やした!
ct.stroke();
横200ピクセルのキャンバスの真ん中に水平線を引いた後に
X軸0ピクセル、Y軸100(横は中央、高さは0px)の座標を指定して、
最後に元の場所に戻ると・・
上三角形の完成です。
なるほどね!
ふぅ。(先は長そうだ・・。
千里の道も一歩から。