jCanvasでお手軽に図形を描画

HTML5 で導入された <canvas> で図形の描画やアニメーションができるようになりました。この <canvas> を jQuery と jQuery Plugin「jCanvas」を使って利用してみようと思います。

jCanvas | jQuery meets the HTML5 canvas
https://projects.calebevans.me/jcanvas/

※jCanvas のライセンスは MIT license、当記事の投稿時点での最新バージョンは v20.1.1 です。

jCanvas の導入方法

まずは、必要なライブラリ「jcanvas.min.js」と「jquery-3.2.1.js」を準備します。注1

それぞれ、下記リンクよりダウンロード可能となっていますので、ダウンロードしてください。(CDN を利用する場合はダウンロード不要です。)

Downloads | jCanvas
https://projects.calebevans.me/jcanvas/downloads/

Download jQuery | jQuery
http://jquery.com/download/

Hello jCanvas

jCanvas を利用するのに最低限必要となるコードは以下のような感じです。

<!DOCTYPE html>
<html>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script src="jquery-3.2.1.js"></script>
  <script src="jcanvas.min.js"></script>
  <script>
    // ここにJavaScriptを記述します。
  </script>
</body>
</html>

※以下では、<script> 〜 </script> の部分のみ記載しますので、ご注意ください。

四角形を描く

では、手始めに drawRect を使って四角形を描いてみます。

$('#canvas').drawRect({
  fillStyle: '#f77',
  x: 150,
  y: 350,
  width: 200,
  height: 100
});

fillStyle で四角形の色、x,y で座標、width,height で幅と高さを指定しています。

なお、<canvas> の大きさは

<canvas id="canvas" width="500" height="500"></canvas>

width,height で指定した値となります。

円を描く

円は drawArc を使って描きます。

$('#canvas').drawArc({
  fillStyle: 'blue',
  strokeStyle: 'green',
  strokeWidth: 10,
  x: 300,
  y: 300,
  radius: 100
});

縁取りを追加したい場合は strokeStyle および strokeWidth で追加できます。それぞれ、色と幅の意味になります。色は「blue」のようにして指定することもできます。また、円の半径は radius で指定します。

ちなみに、strokeStylestrokeWidthdrawRect にも使えるパラメーターですので、必要に応じて使ってみてください。

三角形を描く

三角形などの多角形は drawPolygon を使って描きます。

$('#canvas').drawPolygon({
  fillStyle: 'purple',
  x: 150,
  y: 150,
  radius: 100,
  sides: 3
});

何角形かを表している部分が sides です。今は 3 としているので三角形になります。

ちなみに、concavity のパラメーターを使うと星型も作れます。

$('#canvas').drawPolygon({
  fillStyle: 'purple',
  x: 150,
  y: 150,
  radius: 100,
  sides: 5,
  concavity: 0.5
});

テキストの表示

テキストは drawText で表示できます。

$('#canvas').drawText({
  fillStyle: '#222',
  strokeStyle: '#fff',
  strokeWidth: 2,
  x: 300,
  y: 200,
  fontSize: 48,
  fontFamily: 'Verdana, sans-serif',
  text: 'jCanvas'
});

fontSizefontFamily のパラメーターで文字の大きさと書体を指定しています。

アニメーション

最後に jCanvas を使ってアニメーションするサンプルを1つ紹介してこの記事は終わりにしようと思います。

$('#canvas').drawRect({
  layer: true,
  name: 'example',
  fillStyle: '#77f',
  x: 250,
  y: 450,
  width: 50,
  height: 50,
}).animateLayer('example', {
  y: 250,
  fillStyle: '#777',
  rotate: 360,
  width: 250,
  height: 100
}, 1000, 'easing', function(){
  $('#canvas').drawText({
    fillStyle: '#ff7',
    x: 250, y: 250,
    fontSize: 48,
    fontFamily: 'Verdana, sans-serif',
    text: 'jCanvas'
  });
});

四角形が回転しながら上に移動していき、最後に「jCanvas」の文字を表示するサンプルです。(アニメーションはこちらで確認できます。)

最初の drawRect の部分がアニメーション前の図形、animateLayer の部分がアニメーション後の図形を表しています。実際のアニメーションはアニメーション前とアニメーション後の間を連続的に変化させて作られています。

animateLayer の Syntax は以下のようになっています。

animateLayer( layerId, properties [, duration ] [, easing ] [, callback ] )
animateLayer( layerId, properties, options )

Methods | jCanvas Documentation
https://projects.calebevans.me/jcanvas/docs/methods/

今回は duration を 1 秒(1,000 ミリ秒)にし、callback の完了通知を使ってテキスト表示を行っています。

サンプル

ここで紹介した jCanvas のサンプルコードは下記リンクよりご覧になれます。

関連リンク


注1 jCanvas は version 1.4 以降の jQuery に対応しているそうです。

jqPlotで手軽に綺麗なグラフ

jqPlotというjQueryのPluginを使うと手軽に綺麗なグラフを描くことができます。

http://www.jqplot.com/
http://www.jqplot.com/

最もシンプルなサンプル

データをプロットして線でつなぐだけのシンプルなサンプルです。1の値が10、2の値が30、、、というデータの配列を渡すだけで線グラフが描けます。

$.jqplot('chart',
  [
    [[1, 10], [2, 30], [5, 60], [8, 20], [10, 80]]
  ]
);
http://code.rlated.net/jquery/jqplot/jqplot.html
http://code.rlated.net/jquery/jqplot/jqplot.html

複数のグラフを同時に描く

2つの線グラフを同時に描くサンプルです。

$.jqplot('chart',
  [
    [[1, 10], [2, 30], [5, 60], [8, 20], [10, 80]],
    [[1, 30], [2, 15], [4, 55], [8, 10], [10, 50]]
  ],
  {
    title: 'title',
    axesDefaults: {
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    },
    axes: { xaxis: { label: 'X Axis', pad: 0 }, yaxis: { label: 'Y Axis'} }
  }
);
http://code.rlated.net/jquery/jqplot/line-charts.html
http://code.rlated.net/jquery/jqplot/line-charts.html

棒グラフのサンプル

棒グラフのサンプルも作ってみました。

$.jqplot('chart',
  [
    [40, 50, 20, 30, 80, 20, 30],
    [20, 80, 40, 60, 30, 30, 20]
  ],
  {
    title: 'Bar charts',
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
    },
    series: [
      { label: 'aaa' },
      { label: 'bbb' }
    ],
    legend: {
      show: true
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ['Sun', 'Mon', 'Tue', 'Web', 'Thu', 'Fri', 'Sat']
      }
    }
  }
);
http://code.rlated.net/jquery/jqplot/bar-charts.html
http://code.rlated.net/jquery/jqplot/bar-charts.html

jqPlotは他にも円グラフなどいろいろなグラフを描くことができますので、使ってみてはどうでしょうか?詳細についてはjqPlotのドキュメントを参照してみてください。

サンプル

この記事で紹介したjqPlotのサンプルコードは下記でご覧になれます。
jqPlot – テストコード置き場
Line charts – テストコード置き場
Bar charts – テストコード置き場

リンク