這篇文章主要介紹了html5使用canvas實現彈幕功能範例的相關資料,需要的朋友可以參考下
最近在著手開發彈幕影片網站，透過html5中的canvas實現了彈幕的功能。
那麼閒言碎語不要講，先說思路後再上程式碼。
想法：從頁面佈局上來說就是將一塊畫布覆蓋在了video標籤產生的視訊視窗之上，使用絕對定位就能實現了。最重要的就是js控制畫布上彈幕的顯示了，每一個彈幕都包裝成一個對象，對象包含的屬性有彈幕應該出現的時間，彈幕的顏色，彈幕是否是移動的以及彈幕的文字。彈幕物件擁有方法包含：設定彈幕的橫縱座標，彈幕的移動函數。實現的原理，在監聽視頻開始播放的事件，在視頻開始播放時生成一個定時器，定時器每隔一個時間去遍歷循環彈幕對象數組並根據對象的屬性在畫布的適當位置上繪製出彈幕，計時器中除了繪製彈幕的程式碼還有執行更新彈幕數組的程式碼。
下圖是彈幕效果截圖
那麼下面開始直接上程式碼：
(function () {
window.onload=function () {
var video = document.getElementsByTagName("video")[0]
var cav = document.getElementsByTagName("canvas")[0]
//设置常量canvas的高度以及宽度
var cavWidth = 800
var cavHeight = 420
cav.width=cavWidth
cav.height=cavHeight
var ctx = cav.getContext("2d")
//存储弹幕对象的数组
var capObjs = []
var lastItemTime
var capHeight = 20
var inputEle = document.getElementsByClassName("caption-input-text")[0]
var sendEle = document.getElementsByClassName("caption-sendButton")[0]
var colorUl = document.getElementsByClassName("colorItems")[0]
var ismoveInputEle = document.getElementsByClassName("caption-input-ismove")[0]
//弹幕颜色
var colors=["#fff","#FFCCCC","#CCFFCC","#CCCCFF","#FFFFCC","#CCFFFF"]
var selectedColorIndex = 0
var prevPlayTime = 0
//测试数据的数组
var testArrayCopy = []
var capobjId = 0
//弹幕在画布中高度可能值组成的数组
var topObjs = [{blank:true , value : 20 ,index:0},
{blank:true , value : 50 ,index:1},
{blank:true , value : 80 ,index:2},
{blank:true , value : 110 ,index:3},
{blank:true , value : 140 ,index:4},
{blank:true , value : 170 ,index:5},
{blank:true , value : 200 ,index:6},
{blank:true , value : 230 ,index:7},
{blank:true , value : 260 ,index:8},
{blank:true , value : 290 ,index:9},
{blank:true , value : 320 ,index:10},
{blank:true , value : 350 ,index:11},
{blank:true , value : 380 ,index:12},
{blank:true , value : 410 ,index:13}]
//test data 测试数据
var testArray = [{content:"ABCDEFGHIJKLMNOPQRSTUVWXYZ",time:"1",ismove:false,colorIndex:0},
{content:"233333333333333",time:"2",ismove:true,colorIndex:0},
{content:"干杯，哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:5},
{content:"干杯，哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:4},
{content:"干杯，哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:4},
{content:"干杯，哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:0},
{content:"干杯，哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:0},
{content:"233333333333333",time:"3",ismove:true,colorIndex:0},
{content:"233333333333333",time:"3",ismove:true,colorIndex:0},
{content:"233333333333333",time:"3",ismove:true,colorIndex:0},
{content:"233333333333333",time:"3",ismove:true,colorIndex:0},
{content:"233333333333333",time:"3",ismove:true,colorIndex:0},
{content:"233333333333333",time:"3",ismove:true,colorIndex:0},
{content:"233333333333333",time:"4",ismove:false,colorIndex:0},
{content:"233333333333333",time:"5",ismove:true,colorIndex:4},
{content:"233333333333333",time:"6",ismove:true,colorIndex:2},
{content:"233333333333333",time:"7",ismove:true,colorIndex:2},
{content:"233333333333333",time:"7",ismove:true,colorIndex:2},
{content:"233333333333333",time:"7",ismove:true,colorIndex:2},
{content:"233333333333333",time:"7",ismove:true,colorIndex:2},
{content:"233333333333333",time:"7",ismove:true,colorIndex:2},
{content:"233333333333333",time:"7",ismove:true,colorIndex:2},
{content:"233333333333333",time:"8",ismove:true,colorIndex:0},
{content:"233333333333333",time:"9",ismove:true,colorIndex:0},
{content:"233333333333333",time:"10",ismove:true,colorIndex:0},
{content:"老师说的非常好，我要好好学习了》》》》",time:"12",ismove:true,colorIndex:0},
{content:"老师说的非常好，我要好好学习了》》》》",time:"13",ismove:true,colorIndex:0},
{content:"老师说的非常好，我要好好学习了》》》》",time:"14",ismove:true,colorIndex:2},
{content:"老师说的非常好，我要好好学习了》》》》",time:"15",ismove:false,colorIndex:0},
{content:"老师说的非常好，我要好好学习了》》》》",time:"16",ismove:true,colorIndex:2},
{content:"老师说的非常好，我要好好学习了》》》》",time:"17",ismove:true,colorIndex:3},
{content:"老师说的非常好，我要好好学习了》》》》",time:"18",ismove:true,colorIndex:2},
{content:"老师说的非常好，我要好好学习了》》》》",time:"19",ismove:true,colorIndex:0},
{content:"老师说的非常好，我要好好学习了》》》》",time:"20",ismove:true,colorIndex:3},
{content:"老师说的非常好，我要好好学习了》》》》",time:"21",ismove:true,colorIndex:0},
{content:"老师说的非常好，我要好好学习了》》》》",time:"22",ismove:true,colorIndex:0},
{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"23",ismove:true,colorIndex:0},
{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"24",ismove:true,colorIndex:0},
{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"25",ismove:true,colorIndex:3},
{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"26",ismove:true,colorIndex:0},
{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"27",ismove:true,colorIndex:5},
{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"28",ismove:false,colorIndex:5},
{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"29",ismove:true,colorIndex:5},
{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"30",ismove:true,colorIndex:5},
{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"31",ismove:true,colorIndex:5},
{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"32",ismove:true,colorIndex:2},
{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"33",ismove:true,colorIndex:2},
{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"33",ismove:true,colorIndex:5},
{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"34",ismove:true,colorIndex:5},
{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"35",ismove:true,colorIndex:5},
{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"36",ismove:true,colorIndex:2},
{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"37",ismove:true,colorIndex:2}]
//将测试数据备份
copyArray(testArray , testArrayCopy)
/*弹幕对象的构造函数，参数分别是：1.ismove：弹幕是否是移动的弹幕,2.spe:弹幕的移动速度，3.col：弹幕的颜色，4.text：弹幕的文本*/
/*原型链方法 setTopValue设置纵坐标，setLeftValue设置横坐标，moving完成坐标的改变，setId完成id值的设置*/
function Caption( ismove , spe , col , text ) {
this.isMove = ismove
this.speed = spe
this.color = col || "#ff0"
this.content = text
this.latestTime = 0
this.width = text.length * 20
this.id = 0
this.topIndex = 0
this.occupyPos = true
this.top = 300
this.left = 0
this.setLeftValue()
this.setTopValue()
}
Caption.prototype.setTopValue = function () {
for(var i = 0 ,len = topObjs.length ; i < len ; i++){
if (topObjs[i].blank) {
this.top = topObjs[i].value
this.topIndex = i
topObjs[i].blank = false
break
}
}
}
Caption.prototype.setLeftValue = function () {
if (this.isMove) {
this.left = cavWidth
}
else {
var contentLength = this.content.length
var nowItemLeft = 420 - contentLength * 9
this.left = nowItemLeft
}
}
Caption.prototype.moving = function () {
if (this.isMove) {
this.left-=this.speed
if ( this.left + this.width < cavWidth && this.occupyPos) {
this.occupyPos = false
topObjs[this.topIndex].blank = true
}
}
else{
this.latestTime += 1
if (this.latestTime > 450) {
topObjs[this.topIndex].blank = true
}
}
}
Caption.prototype.setId = function () {
this.id = capobjId
capobjId++
}
var cap1 = new Caption( false , 1 , 0 , "小礼物走一波，双击6666。。。。")
capObjs.push(cap1)
cap1.setId()
//循环遍历数组，根据对象的属性绘制在画布上
function drawAllText () {
ctx.clearRect( 0 , 0 , cavWidth , cavHeight)
ctx.beginPath()
for(var i=0 , len = capObjs . length ; i < len ; i++ ){
ctx.fillStyle = capObjs[i].color
ctx.font = "bold 20px Courier New"
ctx.fillText( capObjs[i].content , capObjs[i].left , capObjs[i].top )
ctx.closePath()
capObjs[i].moving()
// if (capObjs[i].left < - cavWidth ) {
// capObjs.splice (i ,1)
// if excute this statement , will has fault because some item in array is null
// solution is : write a new function to refresh the array
// }
}
}
//更新数组，当对象已经超出范围的时候从数组删除这个对象
function refreshObjs(objs) {
for (var i = objs.length - 1; i >= 0; i--) {
if (objs[i].left < - cavWidth || objs[i].latestTime > 450 ) {
objs.splice(i , 1)
}
}
}
//更新保存弹幕对象的数组
function updateArray () {
var now = parseInt( video.currentTime )
for (var i = testArray.length - 1; i >= 0; i--) {
var nowItemTime = parseInt(testArray[i].time)
if ( nowItemTime == now ) {
//首次写的控制高度的方式，空间利用不充分，后来改为setTopValue中的方式
// var nowItemLeft = getLeftValue(testArray[i])
// var diffTime = Math.abs(nowItemTime - lastItemTime)
// if (diffTime < 6) {
// capHeight += 30
// capHeight = capHeight > 400 ? 20 : capHeight
// }
var temcolor = colors[testArray[i].colorIndex]
var temcap = new Caption ( testArray[i].ismove , 1 , temcolor , testArray[i].content )
capObjs.push(temcap)
capObjs[capObjs.length - 1].setId()
temcap = null
testArray.splice(i,1)
}
}
}
//当用户点击send发送弹幕的回调函数
function sendCaption (argument) {
var inputEleTxt = inputEle.value
var now = parseInt( video.currentTime )
var inputIsmoveValue = ismoveInputEle.checked
var temObj = {content:inputEleTxt,time:now,ismove:inputIsmoveValue,colorIndex:selectedColorIndex}
testArray.push(temObj)
inputEle.value = ""
}
// function getLeftValue (obj) {
// if (obj.ismove) {
// return 0
// }
// else {
// var contentLength = obj.content.length
// var nowItemLeft = 420 - contentLength * 9
// return nowItemLeft
// }
// }
//重新启动canvas，用在人为导致进度条时间的改变
function reinitCav (argument) {
// testArray = testArrayCopy
copyArray(testArrayCopy , testArray)
capObjs = []
capHeight = 0
clearInterval(canvasTimer)
canvasTimer = null
initCanvas()
}
var canvasTimer = null
//初始化canvas，用在开始播放时
function initCanvas () {
if (canvasTimer == null ) {
canvasTimer = setInterval(function (argument) {
drawAllText()
updateArray()
refreshObjs(capObjs)
},10)
}
}//end function initCanvas
//复制数组
function copyArray (arr1 , arr2) {
for (var i =0 , len=arr1.length ; i < len ; i++) {
arr2[i] = arr1[i]
}
}
//color select event 用户发送弹幕的颜色控制代码
colorUl.addEventListener("click", function( e ){
var prevSelectItemId = ""
switch (selectedColorIndex) {
case 0:
prevSelectItemId = "colorItemFrist"
break;
case 1:
prevSelectItemId = "colorItemSecond"
break;
case 2:
prevSelectItemId = "colorItemThrid"
break;
case 3:
prevSelectItemId = "colorItemFourth"
break;
case 4:
prevSelectItemId = "colorItemFifth"
break;
case 5:
prevSelectItemId = "colorItemSixth"
break;
default:
// statements_def
break;
}
var prevSelectItem = document.getElementById(prevSelectItemId)
prevSelectItem.className = ""
var eventTarget = e.target
eventTarget.className = "selectedColor"
var eveTarId = eventTarget.id.substring(9)
switch (eveTarId) {
case "Frist":
selectedColorIndex = 0
break;
case "Second":
selectedColorIndex = 1
break;
case "Thrid":
selectedColorIndex = 2
break;
case "Fourth":
selectedColorIndex = 3
break;
case "Fifth":
selectedColorIndex = 4
break;
case "Sixth":
selectedColorIndex = 5
break;
default:
// statements_def
break;
}
}, false)
video.addEventListener("playing" , function () {
initCanvas()
})
//进度条改变执行代码
video.addEventListener("timeupdate", function () {
var nowPlayTime = video.currentTime
var diffTime = Math.abs(nowPlayTime - prevPlayTime)
prevPlayTime = nowPlayTime
if (diffTime > 1) {
reinitCav()
}
}, false)
//视频暂停执行代码
video.addEventListener("pause" , function () {
clearInterval(canvasTimer)
canvasTimer = null
})
//点击send的监听事件
sendEle.addEventListener("click" , sendCaption)
//input的回车监听事件
inputEle.addEventListener("keydown", function(e) {
var keynum = 0
keynum = window.event ? e.keyCode : e.which
if (keynum == 13) {
sendCaption()
}
})
var aaaa = function() {
alert(1)
}
aaaa()
// function b(aaaa){
// return aaaa()
// }
// b()
}//end
})()希望能夠對想要製作彈幕的同學有所幫助，還可以去github下載完整的專案程式碼：gitbub專案位址
以上是html5使用canvas製作彈幕功能實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AMH5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo
H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AMH5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。
HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AMHTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee
H5代碼：可訪問性和語義HTMLApr 09, 2025 am 12:05 AMH5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構，提高SEO。 2.ARIA屬性如aria-label增強可訪問性，輔助技術用戶可順利使用網頁。
H5與HTML5相同嗎？Apr 08, 2025 am 12:16 AM"h5"和"HTML5"在大多數情況下是相同的，但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準，包含新標籤和API。 2."h5"通常是HTML5的簡稱，但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。
H5的功能是什麼？Apr 07, 2025 am 12:10 AMH5，即HTML5，是HTML的第五個版本，它為開發者提供了更強大的工具集，使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括：1）元素允許在網頁上繪製圖形和動畫；2）語義化標籤如、等，使網頁結構清晰，利於SEO優化；3）新API如GeolocationAPI，支持基於位置的服務；4）跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。
h5鏈接怎麼做Apr 06, 2025 pm 12:39 PM如何創建 H5 鏈接？確定鏈接目標：獲取 H5 頁面或應用程序的 URL。創建 HTML 錨點：使用 <a> 標記創建錨點並指定鏈接目標URL。設置鏈接屬性（可選）：根據需要設置 target、title 和 onclick 屬性。添加到網頁：將 HTML 錨點代碼添加到希望鏈接出現的網頁中。
h5兼容問題怎麼解決Apr 06, 2025 pm 12:36 PM解決 H5 兼容問題的方法包括：使用響應式設計，允許網頁根據屏幕尺寸調整佈局。採用跨瀏覽器測試工具，在發布前測試兼容性。使用 Polyfill，為舊瀏覽器提供對新 API 的支持。遵循 Web 標準，使用有效的代碼和最佳實踐。使用 CSS 預處理器，簡化 CSS 代碼並提高可讀性。優化圖像，減小網頁大小並加快加載速度。啟用 HTTPS，確保網站的安全性。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌
熱工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
SublimeText3漢化版
中文版，非常好用
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
