js实现canvas文字发光走光散光动画效果代码-html代码-BFW代码库

js实现canvas文字发光走光散光动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas文字发光走光散光动画效果代码

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

<!doctype html>
<html>

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

    <style>
        body{
          background: #000;overflow: hidden
        }
    </style>
</head>

<body>

    <canvas id="canvas"></canvas>

    <script>
        var txt = "BFW";
        var txtH = 100;
        var font = "Arial";
        var bg = "#000";
        var rayColor1 = "#e0f7fa";
        var rayColor2 = "#18ffff";
        var fade = 1000;
        
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var cw = canvas.width = window.innerWidth;
        var ch = canvas.height = window.innerHeight;
        
        var w2 = cw/2;
        var h2 = ch/2;
        var pi = Math.PI;
        var pi2 = pi*.5;
        
        var txtCanvas = document.createElement("canvas");
        var txtCtx = txtCanvas.getContext("2d");
        txtCtx.font = txtH + "px " + font;
        txtCtx.textBaseline = "middle";
        var txtW = Math.floor(txtCtx.measureText(txt).width);
        txtCanvas.width = txtW;
        txtCanvas.height = txtH*1.5;
        
        var gradient = ctx.createRadialGradient(w2, h2, 0, w2, h2, txtW);
        gradient.addColorStop(0, rayColor2);
        gradient.addColorStop(1, rayColor1);
        ctx.strokeStyle = gradient;
        
        txtCtx.fillStyle = gradient;
        txtCtx.font = txtH + "px " + font;
        txtCtx.textBaseline = "middle";
        txtCtx.fillText(txt,0,txtH*.5);
        
        //dirty adjust for descends
        txtH *= 1.5;
        
        var bufferCanvas = document.createElement("canvas");
        bufferCanvas.width = txtW;
        bufferCanvas.height = txtH;
        var buffer = bufferCanvas.getContext("2d");
        
        //text start position
        var sx = (cw-txtW)*0.5
        var sy = (ch-txtH)*0.5
        
        ////generate data
        var rays = [];
        var txtData = txtCtx.getImageData(0,0,txtW,txtH);
        for (var i = 0; i < txtData.data.length; i+=4) {
          var ii = i/4;
          var row = Math.floor(ii/txtW)
          var col = ii%txtW
          var alpha = txtData.data[i+3]
          if(alpha !== 0){
            var c = "rgba("
            c += [txtData.data[i],txtData.data[i+1],txtData.data[i+2], alpha/255 ] 
            c += ")";
            rays.push(new Ray(Math.floor(ii/txtW), ii%txtW, c));  
          }
        }
        
        var current = 1;
        //start animation
        tick();
        
        function tick() {
          ctx.clearRect(0,0,c.........完整代码请登录后点击上方下载按钮下载查看