html5文字弹幕效果，挺有意思的，对html5感兴趣拿去研究，学习学习html5.
实现演示：
代码演示：
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];//初始的Xvar numArrT=[80,100,20,300,380,210];//初始的YsetInterval(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)
以上就是HTML5文字弹幕效果源码，有兴趣的同学还可以到PHP中文网搜索更多相关知识哦~
相关推荐：
立即学习“前端免费学习笔记（深入）”；
HTML5图片上传预处理
用HTML5制作屏幕手势解锁功能
用html5和css3写出登录页面教程
以上就是HTML5文字弹幕效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545249.html
微信扫一扫 
支付宝扫一扫 
