大家好，我是前端西瓜哥。pixijs是一个功能强大的WebCanvas2D库，以其强大的性能而闻名。底层使用WebGL实现硬件加速。当然，如果不支持，也可以回退到Canvas。本文使用的pixijs版本为7.1.2。ApplicationApplication代表一个pixijs应用，对应一个Canvas。创建一个Application实例：constapp=newPIXI.Application({width:640,height:360});支持的构造参数有很多，这里列举一些常用的选项：width/height：设置Canvas的宽高。background：背景颜色，可以是数字或字符串，默认为0x000000，即黑色。view：指定要应用的Cavans元素，你可以不提供，pixijs会为你新建一个，添加到body元素下即可。resizeTo：适应容器元素的大小变化，比如window。宽/高配置项设置后无效。更多高级配置请查看官方API文档。这里我没有提供视图，所以我们需要在页面上挂上pixijs生成的Canvas元素：document.body.appendChild(app.view);接下来，我们开始绘制图形。GraphicsGraphics类常用于绘制一些基本图形，如矩形、圆形、线段等。除了绘制图形，你还可以用它来设置遮罩（mask）或命中区域（hitArea）。oneGraphics下不仅可以绘制一个图形，还可以绘制多个图形。绘制矩形绘制一个填充颜色为红色的矩形。constrect=newPIXI.Graphics();rect.beginFill(0xFF0044);//设置填充颜色rect.lineStyle(5,0xFFFFFF);//设置描边线宽和颜色rect.drawRect(100,100,200,100);//参数为x,y,width,height//添加到舞台app.stage.addChild(rect);app.stage是放置图形的地方，即“舞台”。这里我们需要通过addChild将创建好的图形添加到其中，然后pixijs渲染器会读取图形进行绘制。drawRect是一种古老的写作方式。看似直接在画布上画一个矩形，其实底层是创建一个Rect对象，添加到图形树中。不会先绘制，图形树准备好后在渲染阶段读取。对象的数据并绘制。这是一种与不维护图形树状态的CanvasRenderingContext2D.fillRect不同的绘图机制。Graphics的本质不是绘图工具，而是一种建树的工具，绘图的实现在别处。另一种写法是先创建一个PIXI.Rectangle实例。这个实例只描述了一个矩形的属性，不能直接添加到舞台上。需要通过Graphics的DrawShape添加到Graphics中。constrect=newPIXI.Graphics();rect.beginFill(0xFF0044);//设置填充颜色rect.lineStyle(5,0xFFFFFF);//设置描边线宽和颜色consts=newPIXI.Rectangle(100,100,200,100);rect.drawShape(s);//记得添加到舞台上app.stage.addChild(rect);画圆和画圆是一样的：constcircle=newPIXI.Graphics();circle。开始填充（0x00FF44）；circle.lineStyle(5,0xFFFFFF);//参数:cx(中点),cy,radiuscircle.drawCircle(100,100,50);app.stage.addChild（圆圈）；效果：kind锯齿严重，这是因为pixijs默认没有开启抗锯齿，因为抗锯齿处理会消耗额外的性能。可以开启全局抗锯齿能力：constapp=newPIXI.Application({antialias:true,/*其他配置项*/});开启抗锯齿后，圆圈肉眼可见变圆：画圆角矩形代码：constroundedRect=newPIXI.Graphics();roundedRect.beginFill(0xff0044);roundedRect.lineStyle(5,0xffffff);//参数为：x,y,width,height,radiusroundedRect.drawRoundedRect(100,100,200,100,16);//添加到舞台app.stage.addChild(roundedRect);Effect:drawingellipse代码：constellipse=newPIXI.Graphics();ellipse.beginFill(0xff0044);ellipse.lineStyle(5,0xffffff);//参数：cx,cy,width,heightellipse.drawEllipse(100),100,80,40);//添加到舞台app.stage.addChild(ellipse);效果：绘制线条代码：constline=newPIXI.Graphics();line.lineStyle(5,0xffffff);line.moveTo(100,100);line.lineTo(300,250);//添加到stageapp.stage.addChild(线);作用：绘制多边形的代码：constpolygon=newPIXI.Graphics();多边形.beginFill(0xff0044);polygon.lineStyle(5,0xffffff);//x1,y1,x2,y2,...polygon.drawPolygon(100,100,300,250,350,50);//添加到舞台app.stage.addChild(多边形）；作用：绘制三阶贝塞尔曲线代码：constcurve=newPIXI.Graphics();curve.beginFill(0xff0044);curve.lineStyle(5,0xffffff);curve.moveTo(100,180)//cpX,cpY,cpX2,cpY2,toX,toYcurve.bezierCurveTo(90,100,210,100,300,180)//添加到app.stage.addChild(curve)下的stage中；作用：本文结尾??主要讲一下pixijs中一些基本图形的绘制和书写
