当前位置：首页 > HTML

h5实现弹幕

2026-03-06 13:30:12HTML

实现弹幕的基本原理

弹幕功能的核心是在视频或直播画面上实时显示用户发送的评论文字，这些文字以滚动、静止或定位的方式出现在屏幕上。H5实现弹幕主要依赖HTML5的Canvas元素或CSS3动画技术。

h5实现弹幕

使用Canvas实现弹幕

Canvas适合处理大量弹幕的高性能渲染，通过JavaScript控制绘制逻辑：

h5实现弹幕

<canvas id="danmuCanvas" width="800" height="450"></canvas>

const canvas = document.getElementById('danmuCanvas');
const ctx = canvas.getContext('2d');
let danmuList = [];

// 添加弹幕到队列
function addDanmu(text, color, speed) {
    danmuList.push({
        text,
        color: color || '#fff',
        speed: speed || 2,
        x: canvas.width,
        y: Math.random() * canvas.height
    });
}

// 渲染弹幕
function renderDanmu() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    danmuList.forEach((danmu, index) => {
        danmu.x -= danmu.speed;
        ctx.fillStyle = danmu.color;
        ctx.font = '24px sans-serif';
        ctx.fillText(danmu.text, danmu.x, danmu.y);

        // 移除超出画布的弹幕
        if (danmu.x < -ctx.measureText(danmu.text).width) {
            danmuList.splice(index, 1);
        }
    });

    requestAnimationFrame(renderDanmu);
}

// 启动渲染
renderDanmu();

使用CSS3动画实现弹幕

CSS3方案适合简单场景，通过DOM元素和CSS动画控制：

<div class="danmu-container">
    <span class="danmu-item">这是弹幕1</span>
    <span class="danmu-item">这是弹幕2</span>
</div>

.danmu-container {
    position: relative;
    width: 800px;
    height: 450px;
    overflow: hidden;
}

.danmu-item {
    position: absolute;
    white-space: nowrap;
    color: white;
    font-size: 24px;
    animation: moveRightToLeft 10s linear;
}

@keyframes moveRightToLeft {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

function addDanmu(text) {
    const danmu = document.createElement('span');
    danmu.className = 'danmu-item';
    danmu.textContent = text;
    danmu.style.top = `${Math.random() * 100}%`;
    document.querySelector('.danmu-container').appendChild(danmu);

    // 动画结束后移除元素
    danmu.addEventListener('animationend', () => {
        danmu.remove();
    });
}