首先条件就是

// 1.导入pixi
import * as PIXI from 'pixi.js'; 
// 2.创建应用
let app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xffffff,
  resolution:window.devicePixelRatio || 1, //设备像素比
});
// 应用画布加到dom中
document.body.appendChild(app.view)
...画下面所需要的图形...

矩形（drawRect）

const rectangle = new PIXI.Graphics();
rectangle.beginFill(0x66ccff);  //填充颜色
rectangle.drawRect(100, 200, 364, 100); //绘制矩形 x位置，y位置，图形宽，图形高
rectangle.endFill(); //填充结束
app.stage.addChild(rectangle);  // 将矩形加到舞台

圆形（drawCircle）

const circle = new PIXI.Graphics();
circle.beginFill(0x66ccff, 0.9);
circle.drawCircle(0, 0, 53); // 圆心的 X 坐标，圆心的 y 坐标,半径
circle.endFill();
circle.position.set(700, 100); //网页中x位置，y位置
app.stage.addChild(circle);

圆角（drawRoundedRect）

const roundrectangle = new PIXI.Graphics();
roundrectangle.beginFill(0x66ccff, 0.9);
roundrectangle.drawRoundedRect(0, 0, 364,264,10); // X坐标，y坐标,宽度，高度，圆角半径
roundrectangle.endFill();
roundrectangle.position.set(700, 100); //网页中x位置，y位置
app.stage.addChild(roundrectangle);

椭圆（drawEllipse）

const ellipse = new PIXI.Graphics();
ellipse.beginFill(0x66ccff, 0.9);
ellipse.drawEllipse(0, 0, 164,64); // X坐标，y坐标,宽度，高度
ellipse.endFill();
ellipse.position.set(700, 100); //网页中x位置，y位置
app.stage.addChild(ellipse);

多边形（drawPolygon）

const polygon = new PIXI.Graphics();
polygon.beginFill(0x66ccff, 0.9);
polygon.drawPolygon([0, 0, 100,0,100,100,0,100]); //参数是数组 每个元素一个点的坐标，每两个元素是一个点的x和y坐标
polygon.endFill();
polygon.position.set(700, 100); //网页中x位置，y位置
app.stage.addChild(polygon);

圆弧（arc）

const arc = new PIXI.Graphics();
arc.beginFill(0x66ccff, 0.9);
arc.arc(0, 0, 52, 0, Math.PI, false); //X坐标，y坐标,半径，起始角度，结束角度，是否逆时针
arc.endFill();
arc.position.set(700, 100); //网页中x位置，y位置
app.stage.addChild(arc);

线段（lineStyle）

const line = new PIXI.Graphics();
line.lineStyle(4, 0xff000000, 1); //X坐标，y坐标,半径，起始角度，结束角度，是否逆时针
line.moveTo(0, 0);  //设置线段的起始点
line.lineTo(100,100);
line.position.set(700, 100); //网页中x位置，y位置
app.stage.addChild(line);

也可以环绕

const line = new PIXI.Graphics();
line.lineStyle(4, 0xff000000, 1); //X坐标，y坐标,半径，起始角度，结束角度，是否逆时针
line.moveTo(0, 0);  //设置线段的起始点
line.lineTo(50,100);
line.lineTo(100,50);
line.position.set(700, 100); //网页中x位置，y位置
app.stage.addChild(line);