HTML5彈幕文字評(píng)論代碼是指一種可以在網(wǎng)頁(yè)上實(shí)現(xiàn)文字彈幕效果的代碼。彈幕是指可以自由飛行、速度快慢不同、顏色多樣的文字,可以實(shí)現(xiàn)在視頻、音樂(lè)等媒體內(nèi)容上進(jìn)行實(shí)時(shí)評(píng)論的功能。
<canvas id="canvas"></canvas> <input type="text" id="textarea"> <button onclick="addComment()">提交</button> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var curIndex = 0; var comments = []; function Comment(options){ this.color = options.color; this.fontSize = options.fontSize || 14; this.fontWeight = options.fontWeight || 'normal'; this.speed = options.speed || 1.5; this.text = options.text; this.top = options.top || (this.fontSize + 2) * curIndex; this.left = canvas.width; this.width = context.measureText(this.text).width; curIndex++; } Comment.prototype.move = function(){ this.left -= this.speed; } Comment.prototype.draw = function(){ context.fillStyle = this.color; context.font = this.fontWeight + ' ' + this.fontSize + 'px Arial'; context.fillText(this.text, this.left, this.top); }; function addComment(){ var inputValue = document.getElementById("textarea").value; if(inputValue === '') return; var comment = new Comment({ text: inputValue, color: 'rgb(' + Math.ceil(Math.random()*255) + ',' + Math.ceil(Math.random()*255) + ',' + Math.ceil(Math.random()*255) + ')' }); comments.push(comment); document.getElementById("textarea").value = ''; } function render(){ context.clearRect(0, 0, canvas.width, canvas.height); for(var i = 0; i < comments.length; i++){ var comment = comments[i]; comment.move(); if(comment.left < -1 * comment.width){ comments.splice(i, 1); curIndex--; i--; continue; } comment.draw(); } requestAnimationFrame(render); } render(); </script>
以上是一段HTML5彈幕文字評(píng)論代碼,通過(guò)使用Canvas序列幀動(dòng)畫實(shí)現(xiàn)。在頁(yè)面上可以插入一個(gè)Canvas標(biāo)簽,接受用戶的評(píng)論輸入,并在Canvas上顯示彈幕效果。其主要實(shí)現(xiàn)思路是通過(guò)創(chuàng)建Comment對(duì)象,將評(píng)論文本、顏色、字體大小等屬性保存到對(duì)象中,并在Canvas上進(jìn)行渲染。同時(shí),需要循環(huán)遍歷存儲(chǔ)在comments數(shù)組中的彈幕對(duì)象,根據(jù)需要繪制、更新彈幕位置,實(shí)現(xiàn)飛行效果。
HTML5彈幕文字評(píng)論代碼的使用越來(lái)越廣泛,不僅僅局限于視頻、音樂(lè)等內(nèi)容的評(píng)論,也可以應(yīng)用于展示頁(yè)面上的實(shí)時(shí)評(píng)論、消息推送等功能。