import * as PIXI from "pixi.js";

const app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);

// 繪制內容
// ...

const rect = new PIXI.Graphics();

rect.beginFill(0xff0044); // 填充色
rect.lineStyle({ width: 2, color: 0x0000ff }); // 描邊
rect.drawRect(10, 10, 100, 50);
rect.endFill();

app.stage.addChild(rect);

const circle = new PIXI.Graphics();

circle.beginFill(0x00ff00);
circle.drawCircle(200, 10, 50);
circle.endFill();

app.stage.addChild(circle);

const bunny = PIXI.Sprite.from('examples/assets/bunny.png');

bunny.anchor.set(0.5); // 設置精靈圖中心點

bunny.x = app.screen.width / 2; // 將精靈圖繪制在畫布正中央
bunny.y = app.screen.height / 2;

app.stage.addChild(bunny);

// 不支持
const trackPath = new Path2D("M10 10 h 80 v 80 h -80 Z");

const path = new PIXI.Graphics();
path.lineStyle({ width: 1, color: 0x0000ff });
path.moveTo(10, 10);
path.lineTo(20, 100);
path.bezierCurveTo(40, 120, 60, 120, 80, 100)
app.stage.addChild(path);

const container = new PIXI.Container();
container.x = 80;
container.y = 80;
container.addChild(rect, circle);
app.stage.addChild(container);