よく考えたら入門記事書いてなかった…

準備

まずGitHubからライブラリ本体(dist/unitary.browser.js)とcanvasに描画するためのライブラリ(dist/canvas.js)をダウンロードして適当なところへ配置してください。

次にHTMLを書いていきます。下のひな形をコピペしてファイルを作ってください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="./dist/unitary.browser.js"></script> <!-- ライブラリ本体 -->
    <script src="./dist/canvas.js"></script>
    <script>
      window.addEventListener('load', function(){
        // ココにunitaryjsのスクリプトを書きます。別ファイルに分割してココで読み込んでもokです
      });
    </script>
    <style>
      canvas {
        border:2px solid #666;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="200" height="200"></canvas>
  </body>
</html>

これで準備はOKです。

スクリプトを書く

スクリプトとしてはこんな感じで書いていきます。

描画用のcanvasを生成する
三角形や直線、円などをUnitaryJSを使い作る
作ったオブジェクトを描画するcanvasに追加
canvasを描画する

描画用のcanvasを生成する

上の // ココにunitaryjsのスクリプトを〜っていうコメントの下に書いていきましょう。

var myCanvas = new Canvas('canvas');

'canvas' の部分は描画先の<canvas>のidを指定してください。上のひな形のままなら 'canvas' でokです。

三角形などオブジェクトをUnitaryJSで作る

var Point = Unitary.Point;
var myTriangle = new Unitary.Triangle(new Point(0, 0), new Point(30, 0), new Point(15, 30 * Math.sin(Math.PI / 3)));

他にも四角形、長方形、円、おうぎ、直線など様々なオブジェクトを作れます。くわしくはwikiをご覧ください。

作ったオブジェクトをcanvasに追加

myCanvas.add(myTriangle);

追加した順に描画されます。オブジェクト同士が重なる場合、追加する順序に注意してください。

canvasを描画する

myCanvas.draw();

まとめると

上の4ステップを1つにまとめると以下のようなコードとなります。

var myCanvas = new Canvas('canvas');
var Point = Unitary.Point;
var myTriangle = new Unitary.Triangle(new Point(0, 0), new Point(30, 0), new Point(15, 30 * Math.sin(Math.PI / 3)));

myCanvas.add(myTriangle);
myCanvas.draw();

他にも色々

アニメーションしたい場合も簡単に書けます。例えば上の三角形を上へと移動させていくには下のようなコードとなります。

var myCanvas = new Canvas('canvas');
var Point = Unitary.Point;
var myTriangle = new Unitary.Triangle(new Point(0, 0), new Point(30, 0), new Point(15, 30 * Math.sin(Math.PI / 3)));

var dy = 0;
setInterval(function() {
  myCanvas.removeAllObjects();
  myCanvas.clear();
  myCanvas.add(myTriangle.move(0, dy));
  myCanvas.draw();
  dy += 10;
}, 100);

終わりに

いかがでしょうか?今までctx.beginPath()という何をするのかよくわからない"おまじない"に辟易してた人には嬉しいライブラリではないでしょうか?

Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

UnitaryJSの書き方

準備