pixi实现水面波纹涟漪动画效果代码-html代码-BFW代码库

pixi实现水面波纹涟漪动画效果代码

代码语言：html

所属分类：动画

代码描述：pixi实现水面波纹涟漪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  padding: 0;
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
</style>

  
  



</head>

<body >
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.6.1.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi-filters.min.js"></script>
      <script >
const Application = PIXI.Application;
const app = new Application({
  width: 1920,
  height: 1080 });

document.body.appendChild(app.view);

const loader = PIXI.Loader.shared;
loader.add("backgroundImage", "//repo.bfw.wiki/bfwrepo/image/6111ccb4bac88.png").load(setup);

function setup(loader, resources) {
  const backgroundImage = PIXI.Sprite.from(resources.backgroundImage.texture);
  backgroundImage.anchor.set(0.5);
  backgroundImage.x = app.renderer.width / 2;
  backgroundImage.y = app.renderer.height / 2;

  const container = new PIXI.Container();
  container.addChild(backgroundImage);
  app.stage.addChild(container);

  const style = new PIXI.TextStyle({
    fontFamily: "Segoe UI",
    fontSize: 20 + window.innerWidth * 0.06,
    fill: "#ffffff",
    dropShadow: true,
    dropShadowDistance: 2,
    dropShadowAngle: Math.PI / 2,
    dropShadowBlur: 3,
    dropShadowColor: "#000000" });


  window.addEventListener("resize", function () {
    style.fontSize = 20 + window.innerWidth * 0.06;
  });

  const myText = new PIXI.Text("UNDERWATER", style);

  container.addChild(myText);
  myText.anchor.set(0.5);
  myText.x = app.screen.width / 2;
  myText.y =.........完整代码请登录后点击上方下载按钮下载查看