Pixi.js 文字与遮罩

绘制文字

import * as PIXI from "pixi.js"

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x1099bb,
  resolution: window.devicePixelRatio || 1, // 像素比
  antialias: true, // 抗锯齿
})

document.documentElement.appendChild(app.view as any)

const text = new PIXI.Text("hello world", {
  fontSize: 100,
  fill: "pink",
  align: "center",
})

// 设置文字位置
text.x = app.screen.width / 2
text.y = app.screen.height / 2

// 设置锚点
text.anchor.set(0.5)

app.stage.addChild(text)

使用文字作为精灵的遮罩

import * as PIXI from "pixi.js"

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x1099bb,
  resolution: window.devicePixelRatio || 1, // 像素比
  antialias: true, // 抗锯齿
})

document.documentElement.appendChild(app.view as any)

const text = new PIXI.Text("hello world", {
  fontSize: 100,
  fill: "pink",
  align: "center",
})

// 设置文字位置
text.x = app.screen.width / 2
text.y = app.screen.height / 2

// 设置锚点
text.anchor.set(0.5)

// 将一张图片背景遮罩到文字上面
const sprite = PIXI.Sprite.from(
  "https://img0.baidu.com/it/u=2171411284,1924893541&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
)
sprite.width = app.screen.width
sprite.height = app.screen.height

// 使用文字作为精灵的遮罩(可以使用图形,精灵作为遮罩)
sprite.mask = text

app.stage.addChild(sprite)