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

最新推荐文章于 2024-06-12 16:19:00 发布

东成熙就

最新推荐文章于 2024-06-12 16:19:00 发布

阅读量1.1w

点赞数 2

分类专栏： Canvas HTML5 Javascript JQuery 文章标签： js弹幕效果 JQuery弹幕 HTML5 Canvas弹幕

本文链接：https://blog.csdn.net/phpfer/article/details/49764047

版权

Javascript 同时被 3 个专栏收录

33 篇文章 1 订阅

订阅专栏

HTML5

18 篇文章 0 订阅

订阅专栏

JQuery

4 篇文章 0 订阅

订阅专栏

弹幕效果 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' οnclick="startFun('test')">Start</button>
<button id='stop' οnclick="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>