PixiJSでグラデーションを描きたい

PixiJSでグラデーションを描きたい:

PixiJSは2DのWebGLを使いたいときにとても便利なライブラリですが、グラデーションの描画が機能としては用意されていないので、Canvasと組み合わせて実装する必要があります。

といっても、そんなに大げさなことではなく、Canvas要素を用意してグラデーションを設定して、それをもとにSpriteを生成するだけなので、わりとシンプルです。

• Pixi.Application
• Pixi.Sprite.from()

const createGradient = (width, height, colorFrom, colorTo) => { 
  const canvas = document.createElement('canvas')   
  const ctx = canvas.getContext('2d') 
  const gradient = ctx.createLinearGradient(0, 0, width, 0) 
 
  canvas.setAttribute('width', width) 
  canvas.setAttribute('height', height) 
 
  gradient.addColorStop(0, colorFrom) 
  gradient.addColorStop(1, colorTo) 
 
  ctx.fillStyle = gradient 
  ctx.fillRect(0, 0, width, height) 
 
  return PIXI.Sprite.from(canvas) 
} 
 
const app = new PIXI.Application({ 
  width: 500, 
  height: 300 
}) 
 
const gradient = createGradient(500, 300, '#acb6e5', '#86fde8') 
 
app.stage.addChild(gradient) 
 
document.getElementById('app').appendChild(app.view) 

See the Pen Create Gradient With PixiJS by noplan1989 (@noplan1989) on CodePen.