Effet de barrage de texte HTML5-tutoriel HTML-php.cn

Effet de barrage de texte HTML5

韦小宝

Libérer： 2017-11-22 11:32:41

original

9928 Les gens l'ont consulté

HTML5L'effet de barrage de texte est assez intéressant Si vous êtes intéressé par HTML5, étudiez-le et apprenez HTML5.

Démonstration de mise en œuvre :

Démonstration de code :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>PHP中文网--HTML5文字弹幕效果代码</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
	list-style: none;
	border:0;
}
body{
	background: #bcbcbc;
}
.main{
	width: 600px;
	height: 400px;
	margin:0 auto;
	position: relative;
}
.main img{
	position: absolute;
	right: 0;
	bottom:0;
	width: 100px;
	height: 100px;
}
#canvas{
	display: block;
	background: #000;
}
</style>
</head>
<body>

<div class="main">
	<canvas id="canvas">嗨帅哥您的浏览器不支持canvas赶紧去升级吧</canvas>

</div>

<script type="text/javascript">
	var canvas=document.getElementById(&#39;canvas&#39;);
	var ctx=canvas.getContext("2d");
	var width=600;
	var height=400;
	var colorArr=["yellow","pink","orange","red","green"];
	var textArr=[
		"PHP中文网不错我经常去！",
		"我用双手成就你的梦想",
		"犯我德邦者，虽远必诛！",
		"PHP中文网在线网络课程报名啦！！！",
		"PHP中文网在线网络课程报名啦！！！",
		"PHP中文网在线网络课程报名啦！！！",
		"PHP中文网在线网络课程报名啦！！！",
		"PHP中文网在线网络课程报名啦！！！",
		"陷阵之志，有死无生",
		"即使敌众我寡，末将亦能万军从中取敌将首级！"
	]
	canvas.width=width;
	canvas.height=height;
	var image=new Image();

	ctx.font = "20px Courier New";
	var numArrL=[80,100,5,300,500,430];//初始的X
	var numArrT=[80,100,20,300,380,210];//初始的Y
	setInterval(function(){
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.save();
	for(var j=0;j<textArr.length;j++){
		numArrL[j]-=(j+1)*0.6;
		ctx.fillStyle = colorArr[j]
		ctx.fillText(textArr[j],numArrL[j],numArrT[j]);
	}
	for(var i=0;i<textArr.length;i++){
		if(numArrL[i]<=-500){
			numArrL[i]=canvas.width;
		}
	}
	ctx.restore();
	},30)

</script>


</body>
</html>

Copier après la connexion

Ce qui précède est Code source de l'effet de barrage de texte HTML5, les étudiants intéressés peuvent également rechercher des connaissances plus connexes sur le Site Web PHP chinois~

Recommandations associées :

Prétraitement du téléchargement d'images HTML5

Utilisation de HTML5 pour créer une fonction de déverrouillage par gestes à l'écran

Tutoriel sur la rédaction d'une page de connexion en utilisant html5 et css3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!