采用的是Pixi的Graphics来绘制。
0.基本结构
let app = new PIXI.Application({
width:1334,
height:750
});
document.body.appendChild(app.view);
//几何图形
const borderline = new PIXI.Graphics();
borderline.lineStyle(2,0xaaaaaa,0.5)//边线(宽度，颜色，透明度)
borderline.beginFill(0xffffff)//填充
1.绘制矩形drawRect
语法:drawRect(x,y,width,height)
//矩形
borderline.drawRect(100,100,200,300);//x,y,w,h
borderline.endFill();
app.stage.addChild(borderline);//添加到舞台中
2.绘制圆角矩形drawRoundedRect
唯一跟矩形不同的代码如下：
borderline.drawRoundedRect(100,100,200,300,15);//x,y,w,h,圆角度数
3.绘制圆drawCircle
唯一跟矩形不同的代码如下：
borderline.drawCircle(100,100,50);//x,y,半径
4.绘制椭圆drawEllipse
唯一跟矩形不同的代码如下：
borderline.drawEllipse(100,100,50,100);//x,y,w、h
5.绘制线段MoveTo/lineTo
唯一跟矩形不同的代码如下：
borderline.moveTo(100,100);//x,y 开始
borderline.lineTo(100,200);//x,y 结束
6.绘制多边形 drawPolygon
唯一跟矩形不同的代码如下：
const path =[
100,100,
200,200,
100,300
]
borderline.drawPolygon(path)
注意事项
- 颜色值采用16进制，例如：0xffffff
