canvas模拟弹幕效果代码实例
分类:实例代码
canvas模拟弹幕效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。
关于弹幕效果大家一定不会陌生,现在各大视频网站基本都实现了这样的功能。
有效增强了互动效果,下面就分享一段代码实例,它使用canvas实现了此功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</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> </div> <script type="text/javascript"> 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 = [ "前端教程网欢迎您", "只有努力才会有美好的未来", "div教程真的不错", "正则表达式教程还需要完善", "css3教程的演示效果很好", "每一天都是新的大家好好珍惜" ] canvas.width = width; canvas.height = height; ctx.font = "20px Courier New"; //初始的每一句话的左边距离canvas左边的距离 var numArrL = [80, 100, 5, 300, 500, 430]; //初始的每一句话的上边距离canvas上边的距离 var numArrT = [80, 100, 20, 300, 380, 210]; setInterval(function () { //清理一下canvas画布 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); //这个循环是循环便利每一句到话canvas上以及的颜色,每句话的移动速度 //判断每一句话走出canvas后让它自动回来再从canvas的右边走到左边 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]); if (numArrL[j] <= -500) { numArrL[j] = canvas.width; } } ctx.restore(); }, 30) </script> </body> </html>
canvas模拟弹幕效果代码实例,这样的场景在实际项目中还是用的比较多的,关于canvas模拟弹幕效果代码实例就介绍到这了。