pixi.js

[xiaobaifeng]

pixi.js

HTML5创建引擎：使用最快，最灵活的2D WebGL渲染器创建精美的数字内容。

相关信息

• 官网

• github/pixi

• Pixi官方教程中文版

[xiaobaifeng]

流星demo

html

<div
  class="animate-container"
  id="animate-container"
></div>

style

.animate-container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

js

import { initAnimateCanvas } from './home-animate-canvas'

initAnimateCanvas(document.querySelector('#animate-container'))

home-animate-canvas.js

import * as PIXI from 'pixi.js'

export function initAnimateCanvas (containeDom) {
  var width, height
  var minX = 0; var maxY

  width = containeDom.clientWidth
  height = maxY = containeDom.clientHeight

  var renderer = PIXI.autoDetectRenderer({
    width,
    height,
    antialiasing: true,
    transparent: true,
    resolution: 1
  })

  containeDom.appendChild(renderer.view)

  // create the root of the scene graph
  var stage = new PIXI.Container()

  // create a texture from an image path
  var meteorTex = PIXI.Texture.from('config/pixi-test/meteor.png')

  var meteors = []
  var count = 6

  for (var i = 0; i < count; i++) {
    addMeteor()
  }

  function initMeteor (meteor) {
    var speed = 3 + Math.random() * 1
    meteor.position.x = 300 + Math.random() * width
    meteor.position.y = Math.random() * height * 0.1
    meteor.speedX = speed
    meteor.speedY = speed
    meteor.anchor.y = 0.5
    meteor.anchor.x = 0.5
    meteor.scale.set(0.6 + Math.random() * 0.5)
  }

  function addMeteor () {
    var meteor = new PIXI.Sprite(meteorTex)
    initMeteor(meteor)
    meteors.push(meteor)
    stage.addChild(meteor)
  }

  // start animating
  animate()

  function animate () {
    requestAnimationFrame(animate)
    var meteor
    for (i = 0; i < meteors.length; i++) {
      meteor = meteors[i]

      meteor.position.x += -meteor.speedX
      meteor.position.y += meteor.speedY

      if (meteor.position.x < minX || meteor.position.y > maxY) {
        initMeteor(meteor)
      }
    }
    // render the container
    renderer.render(stage)
  }
}