Paper.js | ベクターグラフィックスの描画 | 複数の実例で理解するJavaScriptライブラリ解説

スポンサーリンク

スポンサーリンク

Paper.jsについての解説

Paper.jsは、HTML5の<canvas>要素を使用してベクターグラフィックスを簡単に描画するための強力なJavaScriptライブラリです。ベクターグラフィックス描画に加えて、アニメーションの作成やSVGデータの処理も可能です。

Paper.jsの実装方法

Paper.jsを使用するには、以下のスクリプトを<head>内に記述して、Paper.jsを読み込みます。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>

Paper.jsの特徴

特徴 説明
ベクターグラフィックス パス、図形、テキストなどのベクター形式で描画が可能。
オブジェクト指向 オブジェクトベースで描画を管理し、簡単に操作可能。
キャンバス描画の抽象化 <canvas>の複雑な操作を簡単に扱うための抽象化。
SVGサポート SVGファイルの解析とキャンバス描画への利用。

プロパティとその値の一覧表

プロパティ名 説明 値の例
strokeColor 図形やパスの線の色を指定するプロパティ。 ‘red’, ‘blue’, ‘green’
fillColor 図形の塗りつぶしの色を指定するプロパティ。 ‘yellow’, ‘rgba(0, 255, 0, 0.5)’
strokeWidth 線の幅を指定するプロパティ。 1, 3, 5
opacity オブジェクトの透明度を設定するプロパティ。 0.1, 0.5, 1.0

円を描画する例

実行例

HTMLとJavaScriptコード

<canvas id="circle-example" resize></canvas>

<script>
// Paper.jsの初期化
paper.setup(document.getElementById('circle-example'));

// 円を描画
var circle = new paper.Path.Circle({
    center: [150, 150],
    radius: 100,
    strokeColor: 'blue',
    fillColor: 'lightblue'
});
</script>

解説

この例では、`Path.Circle`を使用してキャンバス上に円を描画しています。`strokeColor`で線の色、`fillColor`で塗りつぶしの色を指定しています。`center`で円の中心、`radius`で半径を指定します。

矩形を描画する例

実行例

HTMLとJavaScriptコード

<canvas id="rectangle-example" resize></canvas>

<script>
// Paper.jsの初期化
paper.setup(document.getElementById('rectangle-example'));

// 矩形を描画
var rectangle = new paper.Path.Rectangle({
    point: [100, 100],
    size: [200, 100],
    strokeColor: 'green',
    fillColor: 'lightgreen'
});
</script>

解説

この例では、`Path.Rectangle`を使用して緑色の矩形を描画しています。`point`で矩形の左上の位置、`size`で幅と高さを指定します。

線を描画する例

実行例

HTMLとJavaScriptコード

<canvas id="line-example" resize></canvas>

<script>
// Paper.jsの初期化
paper.setup(document.getElementById('line-example'));

// 線を描画
var line = new paper.Path({
    segments: [[50, 50], [250, 250]],
    strokeColor: 'black',
    strokeWidth: 2
});
</script>

解説

この例では、`Path`オブジェクトを使って直線を描画しています。`segments`プロパティを使用して始点と終点を指定し、`strokeColor`で線の色を指定しています。

アニメーションを作成する例

実行例

HTMLとJavaScriptコード

<canvas id="animation-example" resize></canvas>

<script>
// Paper.jsの初期化
paper.setup(document.getElementById('animation-example'));

// 円を作成
var movingCircle = new paper.Path.Circle({
    center: [50, 200],
    radius: 50,
    fillColor: 'blue'
});

// フレームごとの動作を定義
function onFrame(event) {
    // 円を右に動かす
    movingCircle.position.x += 2;

    // 右端に達したら左に戻る
    if (movingCircle.position.x > view.size.width + 50) {
        movingCircle.position.x = -50;
    }
}
</script>

解説

この例では、`onFrame`関数を使用して、円が右方向に動き続けるアニメーションを作成しています。`movingCircle.position.x`を変更することで、円のX座標が毎フレーム更新されます。画面の右端を超えた場合、再び左端に戻ります。

Paper.jsの公式サイト

https://paperjs.org/
paperjs.org
スポンサーリンク