HTML5文字弹幕效果

2023-03-20 11:56| 来源: 网络整理| 查看: 265

HTML5文字弹幕效果，挺有意思的，对HTML5感兴趣拿去研究，学习学习HTML5.

实现演示：

`@I6$XZ0UR(L$V9}M@D[PMF.png

代码演示：

PHP中文网--HTML5文字弹幕效果代码 *{ 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; } 嗨帅哥您的浏览器不支持canvas赶紧去升级吧 var canvas=document.getElementById('canvas'); 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

【本文地址】

公司简介

联系我们