【pixijs】关于pixijs画圆

芳草萋萋鹦鹉洲哦2025-12-28 21:30

pixijs中画布原点在左上角，向右是x的正方向，向下是y的正方向（这点和数学坐标系相反）。

用到arc函数时突然短路，忘记0度是从9点方向还是3点方向了，各种坐标系搞晕了，写个文章记录下。

demo如下：

javascript 复制代码

import { Application, Assets, Container, Sprite, Graphics } from 'pixi.js';

(async () => {
  // Create a new application
  const app = new Application();

  // Initialize the application
  await app.init({ background: '#1099bb', resizeTo: window });

  // Append the application canvas to the document body
  document.body.appendChild(app.canvas);

  // Create and add a container to the stage
  const container = new Container();

  app.stage.addChild(container);

  const graphics = new Graphics();
  graphics
    .arc(0, 0, 50, 0, Math.PI / 5)
    .stroke({ width: 2, color: 'pink' });

  // Draw a full circle using an arc
  graphics
    .arc(100, 0, 30, 0, Math.PI * 2)
    .stroke({ color: 'red' });

  // Draw a counterclockwise arc
  graphics
    .arc(200, 0, 40, 0, Math.PI / 5, true)
    .stroke({ width: 2, color: 'green' });
  container.addChild(graphics);
  // Move the container to the center
  container.x = app.screen.width / 2;
  container.y = app.screen.height / 2;

  // Center the bunny sprites in local container coordinates
  container.pivot.x = container.width / 2;
  container.pivot.y = container.height / 2;


})();