53511


pixiを使ってリングの形が描きたいです。  
円を描いて、その中を透明な円でくり抜きたいです。  
canvasではarcとstrokeを使えばいけますが、pixiではエラーが出てしまいます。

[code]

    ring = new PIXI.Graphics();
    ring.beginPath();
    ring.arc(x, y, rad, 0, Math.PI*2, false);
    ring.stroke();
    ring.fill();
    
[/code]

[code]

    エラー文 : Cannot read property 'beginPath' of undefined
    
[/code]

pixiでは円は書けますが中をくり抜けないと思います。  
あと普通にcanvasで描くものをpixiで使う時にどうすればいいのかがいまいちよくわからないです。  
よろしくお願いします。


CC BY-SA 4.0
2019-03-17T14:44:02.337
53500
2019-03-18T03:26:19.433
29881
question
javascript html5-canvas pixi.js
pixi.jsでリングが描きたい


円を`beginFill`せずに、[`lineStyle`](http://pixijs.download/next/docs/PIXI.Graphics.html#lineStyle)を設定した状態で[`drawCircle`](http://pixijs.download/next/docs/PIXI.Graphics.html#drawCircle)することで枠線のみ描画できるはずです。

下記はgithubから取得した[Examples](https://github.com/pixijs/examples)を展開し、`examples-
gh-pages\examples\js\basics\graphics.js`を書き換えたサンプルコードです。

[code]

    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);
    
[/code]

書き換え後に`examples-gh-
pages\index.html`を起動して左側メニューから`Graphics`を選択すると、下記のように表示されることを確認しました。

[![スクリーンショット](https://i.stack.imgur.com/xGUqq.jpg)](https://i.stack.imgur.com/xGUqq.jpg)

三日月のように中心点をずらして円弧をくり抜く方法を知りたい場合は補足をお願いします。  
未確認ですが、自前のcanvasは[Qiitaの記事](https://qiita.com/zuya/items/9d5071bba4d98e4d4a9f)を参考にすれば対応可能ではないでしょうか。


CC BY-SA 4.0
2019-03-18T03:26:19.433
53511
2019-03-18T03:26:19.433
9820
53500
answer