有了基礎場景後,就可以開始畫圖了,首先使用new建構出PIXI.Graphics()
圖像物件,接下來可以利用drawRect()
、drawCircle()
等繪圖函式,進行圖像繪製。
這邊要注意的是,由drawRect()
、drawCircle()
直接建立出來的原始狀態圖像,是不包含顏色與樣式的,因此,可以先利用beginFill()
、lineStyle()
等函式定義樣式後再繪製圖像。
//建立出一個基礎場景,將建立出來的場景放入網頁中
let app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);
//建立繪圖物件
let myObj = new PIXI.Graphics();
//先選擇填色
myObj.beginFill(0xff0000);
//在繪圖物件建立四邊形
myObj.drawRect(0, 0, 200, 100);
myObj.endFill();
//將物件放置場景中
app.stage.addChild(myObj);
在beginFill()
和endFill()
中間產生物件中,都會以beginFill()
定義的顏色做為填色。