円をbeginFill
せずに、lineStyle
を設定した状態でdrawCircle
することで枠線のみ描画できるはずです。
下記はgithubから取得したExamplesを展開し、examples-gh-pages\examples\js\basics\graphics.js
を書き換えたサンプルコードです。
var app = new PIXI.Application(800, 600, { antialias: true });
document.body.appendChild(app.view);
var graphics = new PIXI.Graphics();
// 普通の円
graphics.lineStyle(0); // lineStyleを0にすると枠線が描画されません。
graphics.beginFill(0xDE3249, 1);
graphics.drawCircle(100, 50, 50);
graphics.endFill();
// 中が透明な円
graphics.lineStyle(5, 0xFEEB77, 1);
graphics.drawCircle(150, 50, 50);
// 中が半透明な円
graphics.lineStyle(2, 0xFFBD01, 1);
graphics.beginFill(0xC34288, 0.5);
graphics.drawCircle(200, 50, 50);
graphics.endFill();
app.stage.addChild(graphics);
書き換え後にexamples-gh-pages\index.html
を起動して左側メニューからGraphics
を選択すると、下記のように表示されることを確認しました。
三日月のように中心点をずらして円弧をくり抜く方法を知りたい場合は補足をお願いします。
未確認ですが、自前のcanvasはQiitaの記事を参考にすれば対応可能ではないでしょうか。