[Jquery] jCanvasで描画する。

Jqueryhtml5, 図形, 描画

HTML5でCanvas要素が追加されてしばらくたちます。

特に使い道も思いつかないのですが、前回書いた図形の面積の求め方と合わせてみたらどうかと思い少し調べてみました。

セットアップ

まずは以下のサイトからJcanvasをダウンロードします。

https://projects.calebevans.me/jcanvas/

  • ページ上部のDownload jCanvasをクリックして保存します。
  • jQueryファイルと一緒に読み込みます。 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/jcanvas.min.js"></script>

基本的な使い方

サイトでも紹介されている基本的な使い方です。

$("canvas").drawPolygon({
  draggable: true,
  fillStyle: "#6c3",
  x: 100, y: 100,
  radius: 50, sides: 5
});

ざっとこんな感じです。

  • drawPolygonは多角形を描画する場合に使用します。
  • draggableは描画された要素をドラッグ可能か指定します。
  • fillStyleは塗りつぶし色を指定します。
  • x,yは開始位置を指定します。 drawPolygon の場合は図形の中心がx=0,y=0のようです。
  • radiusは中心から角までの長さのようです。
  • sidesは描画する図形の角数を指定します。(5角形の場合は5)

そこまで難しくなく、多機能なのできちんと調べて後日機能を整理してみたいと思います。

Jqueryhtml5, 図形, 描画