<canvas id="main"></canvas>
* {padding: 0; margin: 0}
const app = new PIXI.Application({
view: document.getElementById('main'),
width: 200,
height: 200,
antialias: true,
transparent: false,
backgroundColor: 0x00CC99,
});
const container = new PIXI.Container();
app.stage.addChild(container);
const style = new PIXI.TextStyle({
fontFamily: 'Microsoft JhengHei', // 風格
fontSize: 24, // 字體大小
fill: [0xEEEE00,0x00ff99], // 填滿,若是陣列則可以漸層效果
align: 'center', // 對齊
stroke: '#000000', // 外框顏色
strokeThickness: 8, // 外框粗細
dropShadow: true, // 必須設為 True 才會啟用
dropShadowColor: '#ffffff',
dropShadowAngle: 5, // 陰影的角
dropShadowDistance: 10, // 陰影距離
wordWrap: true, // 啟用斷行
wordWrapWidth: 5, // 長度多少就斷行
});
const text = new PIXI.Text('這是一段話', style);
container.addChild(text);
This Pen doesn't use any external CSS resources.