JQuery和HTML5 Canvas实现弹幕效果

2019-11-19 18:09:14

字体：大中小

来源：转载

供稿：网友

JQuery和HTML5 Canvas两种方法实现弹幕效果:

方法一，JQuery实现。
源码：

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1">   <!--   <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />   <link href="favicon.ico" rel="Bookmark" type="image/x-icon" />   -->   <meta name="Generator" content="EditPlus®">   <meta name="Author" content="">   <meta name="Keywords" content="">   <meta name="Description" content="">   <title>JQuery弹幕</title>   <link href="" rel="stylesheet" />   <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>   <style type="text/css">     .ctxt{       background:#666;       width:1000px;       height:400px;       overflow:hidden;       margin:0 auto;     }     .ctxt p{       position:relative;       left:1000px;       margin:0;       padding:0;     }   </style> </head> <body> <div id="" class="ctxt"></div> <br /> <form method="post" action="" align="center">   <input type="text" id="msg" style="height:24px;width:200px;" /> <button type="button" id="submitBut">发布</button> </form>  <script type="text/javascript"> $(document).ready(function(){    $("#submitBut").click(function(){     var msgtxt=$("#msg").val();     var colortxt = getReandomColor();     var topPos = generateMixed(3);     if (topPos > 300)     {       topPos = 30;     }     var newtxt = '<p style="top:'+topPos+'px; color:'+colortxt+'">'+$("#msg").val()+'</p>';     $(".ctxt").prepend(newtxt);     var addTextW = $(".ctxt").find("p").width();     $(".ctxt p").animate({left: '-'+addTextW+"px"}, 30000,function(){       $(this).hide();     });   });  }); //随机获取颜色值   function getReandomColor(){     return '#'+(function(h){     return new Array(7-h.length).join("0")+h     })((Math.random()*0x1000000<<0).toString(16))   }  //生成随机数据。n表示位数    var jschars = ['0','1','2','3','4','5','6','7','8','9'];    function generateMixed(n) {      var res = "";      for(var i = 0; i < n ; i ++) {        var id = Math.ceil(Math.random()*9);        res += jschars[id];      }      return res;    }  </script>  </body> </html>

方法二，HTML5 Canvas实现。
源码：

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1">   <!--   <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />   <link href="favicon.ico" rel="Bookmark" type="image/x-icon" />   -->   <meta name="Generator" content="EditPlus®">   <meta name="Author" content="">   <meta name="Keywords" content="">   <meta name="Description" content="">   <title>Canvas弹幕</title>   <link href="" rel="stylesheet" />   <style type="text/css">          #c1{background:#f1f1f1;}     span{color:#FFFFFF;}   </style> </head> <body> <canvas id="c1" width="600" height="300" >   <span>该浏览器不支持html5</span> </canvas> <br /> <input type="text" name='smsg' value="" id="smsg" placeholder="请输入内容" /> <button id="send">发送</button> <!--<button id='start' onclick="startFun('test')">Start</button> <button id='stop' onclick="stopFun()">Stop</button>-->    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript">     var sv;   var sId;   var oC;   var oGC;     var numW;   var numH;   var maxTxt = 600;     $(function(){ $("#send").click(function(){     clearInterval(sId);     var m = $("#smsg").val();     //alert(m);     startFun(m);     $("#smsg").val('')   }); })   function doDraw(msg){     oC = document.getElementById('c1');     oGC = oC.getContext('2d');       numW = oC.width;     numH = oC.height;     console.log(numW+'-'+numH);      oGC.fillStyle="red";     //oGC.fillRect(0,0,numW,100);     oGC.fillText(msg,numW,100);   }   function startFun(msg){     doDraw(msg);     sId = setInterval(function(){          if (numW > -610)       {         numW--;         console.log(numW);         oGC.clearRect(0,0,oC.width,oC.height);         oGC.fillText(msg,numW,100);       } else {         oGC.clearRect(0,0,oC.width,oC.height);         clearInterval(sId);       }     },10);    }   </script> </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：手机端js和html5刮刮卡效果

下一篇：laydate.js日期时间选择插件