canvasタグで点と点を繋ぐ線を描く

今回はサイトに図形を描くcanvasタグについてご紹介します。

コーティングをしていくときに、三角とか台形を簡単にかけたらな！と思ったことはありませんか


HTMLとCSSを使ってももちろん可能ですが、canvasタグを使えば、支点の位置を指定するだけで次の支点を繋ぐ線を引けるので簡単に図形を描くことができます。

こちら動画もぜひご参照くださいませ

canvasタグ

canvasタグを使うには、HTMLで下記のようにcanvasを作ります。

See the Pen canvasタグ by ALcuesto (@ALcuesto) on CodePen.

このcanvasの中に作りたい図形を作っていく形になります。

図形を作るのはscriptタグになります。
scriptタグといってもシンプルなのでHTMLやCSSしか知識が無い方でも見たらある程度理解できることが多いです。

では早速コードをご参照ください。
コメントアウトで説明も記載していますので、この説明を元にいろいろ触ってみると仕組みがすぐにわかりますよ！！

See the Pen canvasタグ2 by ALcuesto (@ALcuesto) on CodePen.

結構シンプルではないでしょうか。
デメリットとしては、canvasタグ内にしか作れないこと。
スタイリングがCSSほど思い通りにはならない点。

しかし、簡単に図形を作れるので、
とりあえずシンプルなもので早く作りたい方などにおすすめです！！

では今回はこの辺で！