<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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js