PIXI实现图片水纹波纹波动效果-html代码-BFW代码库

PIXI实现图片水纹波纹波动效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=pixi.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {

            let type = "WebGL"
            if (!PIXI.utils.isWebGLSupported()) {
                type = "canvas"
            }

            PIXI.utils.sayHello(type)

            // 创建一个 Pixi应用 需要的一些参数
            var option = {
                width: 400,
                height: 300,
                transparent: true,
            }

            // 创建一个 Pixi应用
            var app = new PIXI.Application(option);
            // 获取渲染器
            var renderer = app.renderer;
            // 图片精灵
            var preview;
            // 置换图精灵
            var displacementSprite;
            // 滤镜
            var displacementFilter;
            // 舞台（一个容器），这里面包括了图片精灵、置换图精灵
            var stage;
            var playground = document.getElementById('px-render');

            function setScene(url) {
                // renderer.view 是 Pixi 创建的一个canvas
                // 把 Pixi 创建的 canvas 添加到页面上
                playground.appendChild(renderer.view);

                // 创建一个容器
                stage = new PIXI.Container();

                // 根据图片的 url，创建图片精灵
                preview = PIXI.Sprite.fromIm.........完整代码请登录后点击上方下载按钮下载查看