溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)HTML5如何實現(xiàn)靜態(tài)循環(huán)滾動播放彈幕，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
語法如下：
canvasBarrage(canvas, data);
其中：
canvas
canvas 表示我們的 <canvas> 畫布元素，可以直接是DOM元素，也可以是 <canvas> 畫布元素的選擇器。
data
data 表示彈幕數(shù)據(jù)，是一個數(shù)組。例如下面：
[{
value: '彈幕1',
color: 'blue',
range: [0, 0.5]
}, {
value: '彈幕2',
color: 'red',
range: [0.5, 1]
}]可以看到數(shù)組中的每一個值表示一個彈幕的信息對象。其中 value 表示彈幕的文字內(nèi)容； color 表示彈幕描邊的顏色（彈幕文字本身默認(rèn)是白色）； range 表示彈幕在畫布中的區(qū)域范圍，例如 [0, 0.5] 表示彈幕在畫布中的上半?yún)^(qū)域顯示， [0.5, 1] 表示彈幕在畫布中的下半?yún)^(qū)域顯示。
然后就可以看到無限滾動的彈幕效果了。
此彈幕效果默認(rèn)文字大小是 28px ，并且文字加粗，如果這個效果不符合您的需求，需要在 canvasBarrage() 方法中修改源代碼。因為本來就是個簡單靜態(tài)效果，因此沒有專門設(shè)計成API。
此彈幕效果默認(rèn)是白色文字加可變顏色描邊，同樣的，如果這個效果不符合您的需求，需要在 canvasBarrage() 方法中修改源代碼。
跟真實的彈幕效果有所不同，這里的彈幕出現(xiàn)的速度和時機(jī)不是基于特定時間，而是隨機(jī)產(chǎn)生。所以看到有些文字好像開飛機(jī)，而有些文字好像坐著拖拉機(jī)。因為是死數(shù)據(jù)，這樣設(shè)計會看上去更真實寫。
<style>
.video-x {
position: relative;
width: 640px;
margin: auto;
}
.canvas-barrage {
position: absolute;
width: 640px;
height: 360px;
}
.video-placeholder {
height: 360px;
background-color: #000;
animation: bgColor 10s infinite alternate;
}
@keyframes bgColor {
25% {
background-color: darkred;
}
50% {
background-color: darkgreen;
}
75% {
background-color: darkblue;
}
100% {
background-color: sliver;
}
}
</style>
<div class="video-x">
<canvas id="canvasBarrage" class="canvas-barrage"></canvas>
<div class="video-placeholder"></div>
</div>
<script>
// 彈幕數(shù)據(jù)
var dataBarrage = [{
value: '使用的是靜態(tài)死數(shù)據(jù)',
color: 'blue',
range: [0, 0.5]
}, {
value: '隨機(jī)循環(huán)播放',
color: 'blue',
range: [0, 0.6]
}, {
value: '可以控制區(qū)域和垂直分布范圍',
color: 'blue',
range: [0, 0.5]
}, {
value: '字體大小和速度在方法內(nèi)設(shè)置',
color: 'black',
range: [0.1, 1]
}, {
value: '適合用在一些靜態(tài)頁面上',
color: 'black',
range: [0.2, 1]
}, {
value: '基于canvas實現(xiàn)',
color: 'black',
range: [0.2, 0.9]
}, {
value: '因此IE9+瀏覽器才支持',
color: 'black',
range: [0.2, 1]
}, {
value: '可以設(shè)置邊框顏色',
color: 'black',
range: [0.2, 1]
}, {
value: '文字顏色默認(rèn)都是白色',
color: 'black',
range: [0.2, 0.9]
}, {
value: '若文字顏色不想白色',
color: 'black',
range: [0.2, 1]
}, {
value: '需要自己調(diào)整下JS',
color: 'black',
range: [0.6, 0.7]
}, {
value: '如果需要的是真實和視頻交互的彈幕',
color: 'black',
range: [0.2, 1]
}, {
value: '可以回到原文',
color: 'black',
range: [0, 0.9]
}, {
value: '查看另外一個demo',
color: 'black',
range: [0.7, 1]
}, {
value: '下面就是占位彈幕了',
color: 'black',
range: [0.7, 0.95]
}, {
value: '前方高能預(yù)警?。?！',
color: 'orange',
range: [0.5, 0.8]
}, {
value: '前方高能預(yù)警?。?！',
color: 'orange',
range: [0.5, 0.9]
}, {
value: '前方高能預(yù)警?。。?#39;,
color: 'orange',
range: [0, 1]
}, {
value: '前方高能預(yù)警?。?！',
color: 'orange',
range: [0, 1]
}];
// 彈幕方法
var canvasBarrage = function (canvas, data) {
if (!canvas || !data || !data.length) {
return;
}
if (typeof canvas == 'string') {
canvas = document.querySelector(canvas);
canvasBarrage(canvas, data);
return;
}
var context = canvas.getContext('2d');
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
// 存儲實例
var store = {};
// 字號大小
var fontSize = 28;
// 實例方法
var Barrage = function (obj, index) {
// 隨機(jī)x坐標(biāo)也就是橫坐標(biāo)，對于y縱坐標(biāo)，以及變化量moveX
this.x = (1 + index * 0.1 / Math.random()) * canvas.width;
this.y = obj.range[0] * canvas.height + (obj.range[1] - obj.range[0]) * canvas.height * Math.random() + 36;
if (this.y < fontSize) {
this.y = fontSize;
} else if (this.y > canvas.height - fontSize) {
this.y = canvas.height - fontSize;
}
this.moveX = 1 + Math.random() * 3;
this.opacity = 0.8 + 0.2 * Math.random();
this.params = obj;
this.draw = function () {
var params = this.params;
// 根據(jù)此時x位置繪制文本
context.strokeStyle = params.color;
context.font = 'bold ' + fontSize + 'px "microsoft yahei", sans-serif';
context.fillStyle = 'rgba(255,255,255,' + this.opacity + ')';
context.fillText(params.value, this.x, this.y);
context.strokeText(params.value, this.x, this.y);
};
};
data.forEach(function (obj, index) {
store[index] = new Barrage(obj, index);
});
// 繪制彈幕文本
var draw = function () {
for (var index in store) {
var barrage = store[index];
// 位置變化
barrage.x -= barrage.moveX;
if (barrage.x < -1 * canvas.width * 1.5) {
// 移動到畫布外部時候從左側(cè)開始繼續(xù)位移
barrage.x = (1 + index * 0.1 / Math.random()) * canvas.width;
barrage.y = (barrage.params.range[0] + (barrage.params.range[1] - barrage.params.range[0]) * Math.random()) * canvas.height;
if (barrage.y < fontSize) {
barrage.y = fontSize;
} else if (barrage.y > canvas.height - fontSize) {
barrage.y = canvas.height - fontSize;
}
barrage.moveX = 1 + Math.random() * 3;
}
// 根據(jù)新位置繪制圓圈圈
store[index].draw();
}
};
// 畫布渲染
var render = function () {
// 清除畫布
context.clearRect(0, 0, canvas.width, canvas.height);
// 繪制畫布上所有的圓圈圈
draw();
// 繼續(xù)渲染
requestAnimationFrame(render);
};
render();
};
canvasBarrage('#canvasBarrage', dataBarrage);
</script>關(guān)于“HTML5如何實現(xiàn)靜態(tài)循環(huán)滾動播放彈幕”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼