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

方法一，源码：

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <Meta name="Generator" content="EditPlus®"> <Meta name="Author" content=""> <Meta name="Keywords" content=""> <Meta name="Description" content="">

方法二， 源码：

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <Meta name="Generator" content="EditPlus®"> <Meta name="Author" content=""> <Meta name="Keywords" content=""> <Meta name="Description" content=""> 该浏览器不支持html5

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"&gt;
<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,numW,100); 
oGC.fillText(msg,100); 

}
function startFun(msg){
doDraw(msg);
sId = setInterval(function(){
if (numW > -610)
{
numW--;
console.log(numW);
oGC.clearRect(0,oC.width,oC.height);
oGC.fillText(msg,100);
} else {
oGC.clearRect(0,oC.height);
clearInterval(sId);
}
},10);
}

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

原文链接：https://www.f2er.com/jquery/42896.html