円や多角形をランダムに配置する背景を SVG で作る その2

Category : JavaScript, SVG

円や多角形をランダムに配置する背景を SVG で作る の続きです。
もうちょっと使いやすくなるように練習を兼ねてやってみました。

GPBG.js サンプル 1

GPBG.js サンプル 2

GPBG.js サンプル 3

GPBG.js

前のはインライン SVG を作って body の最後に入れていましたが、今回は style 要素を作り、指定したセレクタの背景画像として Data URI にした SVG を指定するようにしました。

一番簡単に使うと、こんな感じになります。

<script type="text/javascript" src="gpbg.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
// script.js の中身
(function () {
  if (window.GPBG) {
    var gpbg = new GPBG();

    if (window.addEventListener) {
      var draw = function () {
        gpbg.draw('body');
      };
      window.addEventListener('DOMContentLoaded', draw, false);
    }

    gpbg.die();
  }
})();
die()
グローバルオブジェクトから GPBG を削除します。
draw(selector, options)
指定されたセレクタの背景画像に Data URI にした SVG 画像を指定します。
セレクタにマッチする要素が複数ある場合は、一番大きなものに合わせたサイズの SVG 画像になります。
オプションを指定しない場合は初期設定になります。
オプションの初期設定。必要ないものは省略可能。
{
  // 図形の頂点数 (0-2: 円, 3: 三角形, 4: 正方形...)
  // ここで指定したものをランダムに表示します
  // 必ず数値の配列で指定して下さい
  apexes: [0],
  // 図形をいくつ表示するか
  count: 30,
  // 図形の最小半径
  minRadius: 20,
  // 図形の最大半径
  maxRadius: 60,
  // 図形に使う色の最小 RGB 値 (0-255)
  minRgbRange: 160,
  // 図形に使う色の最大 RGB 値 (0-255)
  maxRgbRange: 240,
  // 図形の塗りつぶし色の不透明度 (0-1)
  fillOpacity: 0.3,
  // 図形の縁取りの太さ
  strokeWidth: 1,
  // 図形の縁取り色の不透明度 (0-1)
  strokeOpacity: 0.5,
  // グレースケールにするかどうか
  grayscale: false
}
getImage(width, height, options)
直接 SVG 画像を取得したい場合に使います。
widthheight は数値、オプションは前のと同じです。
ここで指定した大きさの SVG 画像を得られます。
svgToDataUrl(svg)
SVG 画像を Data URI に変換します。
必要なら getImage() と一緒に使います。

練習用に作ったので、中身はあんまり期待しないで下さい……。
一応、Gist にも置いてあります

Leave a Reply