最近为了制作调度系统的地图绘制，不得已学了pixi制作2D的地图，之前用threejs，发现在动态绘制线的时候效果很不好，而且很耗费性能，2D确实有着3D不可替代的地方。第一节，通过pixi绘制各种不同的图形。
下面先演示绘制一个长方形的例子：
//新建一个PIXI的Graphics绘图对象
const graphics = new PIXI.Graphics()
// 开始绘图设置填充颜色，两个参数分别为(颜色, 不透明度)
graphics.beginFill(0xffd900, 1)
// 创建图形，四个参数分别是x,y,widht,height,也就是从x,y坐标开始绘制一个宽200，高100的长方形
graphics.drawRect(50, 50, 200, 100)
// 结束绘制操作
graphics.endFill()
//将绘制的图形添加到舞台stage中
app.stage.addChild(graphics);
如此这般，便在画布中有了一个黄色的长方形，同时还可以将长方形设置为圆角，显得圆润一些：只需要将代码中的graphics.drawRect(50, 50, 200, 100)替换为graphics.drawRoundedRect(50, 50, 200, 100,5)；新替换的方法最后一个值就是圆角的半径，类似div中的radius值，和radius一样，你如果长方形改为正方形，并把圆角的半径设置为边的一半，你就会得到一个圆形。
// 创建图形类
const graphics = new PIXI.Graphics()
// 设置填充颜色 beginFill(颜色, 不透明度)
graphics.beginFill(0xffd900, 1)
//从，50,50的坐标绘制宽和高都为100的矩形，并设置圆角半径为50
graphics.drawRoundedRect(50, 50, 100, 100,50)
// 绘制操作
graphics.endFill()
app.stage.addChild(graphics);
当然这是通过骚操作的方式实现的，正儿八经的绘制方法如下，绘制好的效果和上图一模一样，唯一的区别就是长方形的x和y是开始绘制的点，圆的x和y是圆心。
// 创建图形类
const graphics = new PIXI.Graphics()
// 设置填充颜色 beginFill(颜色, 不透明度)
graphics.beginFill(0xffd900, 1)
//从，1001，00的坐标绘制半径为50的圆
graphics.drawCircle(100, 100, 50)
// 绘制操作
graphics.endFill()
app.stage.addChild(graphics);
但是这两种方式都只能绘制出圆或者圆角的方形，没办法绘制出椭圆，因为椭圆又是一个新的绘制方法：graphics.drawEllipse，下面在(100,100)的位置绘制一个宽100，高50的椭圆。
// 创建图形类
const graphics = new PIXI.Graphics()
// 设置填充颜色 beginFill(颜色, 不透明度)
graphics.beginFill(0xffd900, 1)
//从，100,100的坐标绘制宽100高50的椭圆
graphics.drawEllipse(100, 100, 100, 50)
// 绘制操作
graphics.endFill()
app.stage.addChild(graphics);
常规图形就这些了，下一章再介绍其他花里花哨的图形绘制方法。
