マスク効果（またはクリッピング） – 日本語で書くアニメーションプログラム

描画コンテナにマスク用プロパティを追加　＝　マスクの形状パス

const container = new PIXI.Container();

// 描画領域にマスクを設定
container.mask = new PIXI.Graphics()
	.beginFill(0xffffff)
	.drawCircle(400, 400, 200)
	.endFill();

// 動かすオブジェクトを定義
let obj = new PIXI.Graphics();
obj.beginFill(0xFFFFFF, 1);
obj.drawRoundedRect(0, 0, 100, 100, 16);
obj.endFill();
obj.pivot.x = 50;
obj.pivot.y = 50;

container.addChild(obj);

let radius = 10;
const speed = 3;
let angle = 0;

app.ticker.add((delta) => {
	angle += speed;
    obj.x = radius * Math.sin(angle * Math.PI / 180);
    obj.y = radius * Math.cos(angle * Math.PI / 180);
});

描画領域　＝　描画領域を設定

描画領域.マスクプロパティ　＝　マスクの形状を登録

オブジェクト名 = オブジェクトの入れ物を作成
オブジェクト.色の塗りつぶし（白,透明度）
オブジェクト.角丸の四角を作成（x座標, y座標, 横幅, 縦幅, 角丸サイズ）
オブジェクト.色の塗りつぶし終了
オブジェクト.中心点x = オブジェクトの幅の半分
オブジェクト.中心点y = オブジェクトの高さの半分

描画領域にオブジェクトを追加

円運動の半径　＝　200
速度　＝　3
角度　＝　0

アニメーションさせるためのループ処理{
　角度 += 速度
　オブジェクトのX座標　＝　円運動の半径 * 三角関数sin（角度 * 円周率 / 180）
　オブジェクトのY座標　＝　円運動の半径 * 三角関数cos（角度 * 円周率 / 180）
}