JQuery和HTML5 Canvas实现弹幕效果

82264451

2017-01-04

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>

html5 jquery canvas meta