pixi实现粒子云404错误页面效果代码-html代码-BFW代码库

pixi实现粒子云404错误页面效果代码

代码语言：html

所属分类：粒子

代码描述：pixi实现粒子云404错误页面效果代码

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

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

<head>
    <meta charset="UTF-8">
    <title></title>


    <style>
        /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
        body {
        	background: #2196F3;
        }
        
        #notFound {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translateY(-50%) translateX(-50%) scale(1.2);
          width: 80%;
          height: auto;
        }
    </style>


</head>

<body>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.min.js"></script>
    <script>
        //animation frame polyfill
    (function() {
        var lastTime = 0;
        var vendors = ['ms', 'moz', 'webkit', 'o'];
        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
        }
    
        if (!window.requestAnimationFrame)
            window.requestAnimationFrame = function(callback, element) {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                var id = window.setTimeout(function() {
                        callback(currTime + timeToCall);
                    },
                    timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };
    
        if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = function(id) {
                clearTimeout(id);
            };
    }());
    
    //math2 utils
    var Math2={};Math2.random=function(t,n){return Math.random()*(n-t)+t},Math2.map=function(t,n,r,a,o){return(o-a)*((t-n)/(r-n))+a},Math2.randomPlusMinus=function(t){return t=t?t:.5,Math.random()>t?-1:1},Math2.randomInt=function(t,n){return n+=1,Math.floor(Math.random()*(n-t)+t)},Math2.randomBool=function(t){return t=t?t:.5,Math.random()<t?!0:!1},Math2.degToRad=function(t){return rad=t*Math.PI/180,rad},Math2.radToDeg=function(t){return deg=180/(Math.PI*t),deg},Math2.rgbToHex=function(t){function n(t){return("0"+parseInt(t).toString(16)).slice(-2)}t=t.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);var r=n(t[1])+n(t[2])+n(t[3]);return r.toUpperCase()},Math2.distance=function(t,n,r,a){return Math.sqrt((r-t)*(r-t)+(a-n)*(a-n))};
    
    //mouse
    var mousePos={
      x:0,
      y:0
    };
    window.onmousemove = function(e) {
                
                e = e || window.event;
    
    			var pageX = e.pageX;
    			var pageY = e.pageY;
    			if (pageX === undefined) {
    				pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    				pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    			}
                mousePos = {
                    x: pageX,
                    y: pageY,
                };
            }
            
            
    
    var options = {
            width: window.innerWidth,
            height: window.innerHeight,
            keyword : "404",
    				density : 10,
    				densityText : 3,
    				minDist : 20,
        }
        // initialize canvas
    var canvas = document.createElement('canvas');
    canvas.width = options.width;
    canvas.height = options.height;
    canvas.style.width = options.width/2;
    canvas.style.height = options.height/2;
    canvas.getContext('2d').scale(2,2)
    
    var renderer = new PIXI.autoDetectRenderer(options.width, options.height, {
        transparent: true
    });
    var stage = new PIXI.Stage("0X000000", true);
    document.body.appendChild(renderer.view);
    renderer.view.id = "notFound";
    
    
    
    
    
    
    
    var imageData = false;
    var particles =[]; 
    
    
    function init() {
        positionParticles();
        positionText();
    }
    
.........完整代码请登录后点击上方下载按钮下载查看