CreateJS(2d)でリアルなピアノを描いたのですが、どうも動きが鈍い。
いろいろ調べたら、WEBGLなら早いというので、さっそく試してみました。

こういう使い方が正しいのかはわかりませんが・・・・

まずは線を書いてみます。

index.html

<!doctype html>
<html>
<head>
pixijsを読み込む。
https://github.com/GoodBoyDigital/pixi.js/からダウンロードできます。
binフォルダに入っています。
<script src="/playpiano/js/pixi.min.js"></script>
<script>
        //背景色黒でキャンバスを作成
        var stage = new PIXI.Stage(0x000000);

        //100 x 100のレンダラーを作成します
        var renderer = PIXI.autoDetectRenderer(100,100);

        //DOMに追加する
        document.getElementById("pixicanvas").appendChild(renderer.view);

        //Graphicsオブジェクトを作成
        var g = new PIXI.Graphics();

        //線の太さ2 ,白で、10,10から100,100に線を描く
        g.lineStyle(2,0xffffff).moveTo(10,10).lineTo(100,100);

        //ステージに追加する
        stage.addChild(g);

        //描画する
        renderer.render(stage);
</script>
<body>
<div id=pixicanvas></div>
</body>
</html>

実行結果

サンプル(jsfiddle)

以上、Createjsと同じような感じで書くことができました。

しかし描く方向によっては線がギザギザになります。
これはレンダラを作成する際に、アンチエイリアスを有効にすると、すこし改善されます。

 PIXI.autoDetectRenderer(100,100,{antialias:true);

以下にアンチエイリアスなしとありの場合の実行結果です
アンチエイリアスなし

アンチエイリアスあり

ちょっと例がわかりにくいですかね。。。
線に限らず、円などで効果を発揮すると思います。

それでも多少はカクカクしますので、BlurFilterなどで処理すればきれいになるかと。

pixi.js 入門メモ1 線を描く

実行結果