Pixijs 繪製基本圖形

採用的是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