3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

お絵かきできるSNSを作りたい!2

Last updated at Posted at 2020-01-28

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ピクセルのキャンバスの真ん中に水平線が引けました。)
WS000000.JPG

なるほど!
ちなみに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)の座標を指定して、
最後に元の場所に戻ると・・

WS000001.JPG

上三角形の完成です。

なるほどね!

ふぅ。(先は長そうだ・・。
千里の道も一歩から。

次:お絵かきできるSNSを作りたい!3
最初:お絵かきできるSNSを作りたい!

3
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?