美文网首页程序员
一个简单抽奖特效的实现

一个简单抽奖特效的实现

作者: rmrfany | 来源:发表于2019-01-22 18:41 被阅读0次

      快过年了,有个朋友问我要一个抽奖的特效的,说是只要个很简单的滚动抽奖。我想了想,作为程序猿,我怎么能以简单为标准呢(虽然我不会GUI也不会前端),但是我有一个学习的心,哈哈。于是我就在网上搜了下,我看到一个还可以的滚动抽奖特效,是个js做的特效,于是我把源码给爬下来了(不厚道之处还请作者见谅)。
      先看特效吧

    image.png

    我只是加了个最丑的控制按钮,和稍微改动了代码。

    <script type="text/javascript">
    var name_list = [
    "JAING",
    "ADIF",
    "AKSDLJF",
    "AKSDLJFSD",
    ];
    chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // All possible Charactrers

      这一部分代码可以改动为中文名字,将chars 每一个字母换成汉字列表,再将name_list中每一个改为名字就可以了,当然名字得在chars中咯。懒的话直接用英文字母也是可以的~~~

      copy代码内容后文件名后缀改为html就可以了直接在浏览器中打开了

    
    <!DOCTYPE html>
    <html lang="en" >
    
    <head>
      <meta charset="UTF-8">
      <title>抽  奖</title>
      <style>
          canvas{
            position: absolute;
            text-align: center;
            background: #111;
            height: 100%;
            width: 80%;
            left: 0;
            top: 0;
          }
          button{
            position: absolute;
            text-align: center;
            background: #3F0;
            height: 100%;
            width: 20%;
            right: 0;
            top: 0;
            border: none;
            outline: none;
            font-size: 30px;
          }
      </style>
    </head>
    
    <body>
        <div>
            <canvas></canvas> 
        </div>
        <div>
            <button onclick="btn_click_fun()"><h1> restart </h1></button>
        </div>
    </body>
    <script type="text/javascript">
      var name_list = [
        "JAING",
        "ADIF",
        "AKSDLJF",
        "AKSDLJFSD",
      ];
      chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';  // All possible Charactrers
    
      var index = parseInt(Math.random() * name_list.length) - 1;
      text = name_list[index];  // The message displayed
      scale = 50;  // Font size and overall scale
      breaks = 0.003;  // Speed loss per frame
      endSpeed = 0.05;  // Speed at which the letter stops
      firstLetter = 220;  // Number of frames untill the first letter stopps (60 frames per second)
      delay = 40;  // Number of frames between letters stopping
    
    
      canvas = document.querySelector('canvas');
      ctx = canvas.getContext('2d');
    
      text = text.split('');
      chars = chars.split('');
      charMap = [];
      offset = [];
      offsetV = [];
    
      for(var i=0;i<chars.length;i++){
        charMap[chars[i]] = i;
      }
    
      for(var i=0;i<text.length;i++){
        var f = firstLetter+delay*i;
        offsetV[i] = endSpeed+breaks*f;
        offset[i] = -(1+f)*(breaks*f+2*endSpeed)/2;
      }
    
      (onresize = function(){
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
      })();
    
      requestAnimationFrame(loop = function(){
        ctx.setTransform(1,0,0,1,0,0);
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.globalAlpha = 1;
        ctx.fillStyle = '#622';
        ctx.fillRect(0,(canvas.height-scale)/2,canvas.width,scale);
        for(var i=0;i<text.length;i++){
          ctx.fillStyle = '#ccc';
          ctx.textBaseline = 'middle';
          ctx.textAlign = 'center';
          ctx.setTransform(1,0,0,1,Math.floor((canvas.width-scale*(text.length-1))/2),Math.floor(canvas.height/2));
          var o = offset[i];
          while(o<0)o++;
          o %= 1;
          var h = Math.ceil(canvas.height/2/scale)
          for(var j=-h;j<h;j++){
            var c = charMap[text[i]]+j-Math.floor(offset[i]);
            while(c<0)c+=chars.length;
            c %= chars.length;
            var s = 1-Math.abs(j+o)/(canvas.height/2/scale+1)
            ctx.globalAlpha = s
            ctx.font = scale*s + 'px Helvetica'
            ctx.fillText(chars[c],scale*i,(j+o)*scale);
          }
          offset[i] += offsetV[i];
          offsetV[i] -= breaks;
          if(offsetV[i]<endSpeed){
            offset[i] = 0;
            offsetV[i] = 0;
          }
        }
        
        requestAnimationFrame(loop);
      });
    
      function btn_click_fun() {
        location=location;
      }
    
    </script>
    </html>
    

    相关文章

      网友评论

        本文标题:一个简单抽奖特效的实现

        本文链接:https://www.haomeiwen.com/subject/lverjqtx.html