突然发现前端很有意思啊，学着用 canvas 做了个网页弹幕引擎。之前看到有人用 svg 做了一个弹幕播放器，所以想着自己也做一个玩，然后就有了这个。在计算弹幕出现的位置和消失的位置这两个地方有点麻烦

演示地址

用setInterval每 16ms 计算一下每条弹幕的位置，然后用requestAnimationFrame绘制出每条弹幕，通过cvs.width = cvs.width可以清空画布。之前什么都不知道，用循环来绘图，然后会出现不明卡顿，搜了一下才发现计算和绘图分开才可以避免浏览器带来的卡顿

1
setInterval(() => {
2
  // 在这里计算和更改弹幕的位置
3
}, 16)
4

5
function draw () {
6
  // 在这里绘制弹幕
7
  window.requestAnimationFrame(() => {
8
    cvs.width = cvs.width
9
    draw()
10
  })
11
}

这个 代码 写的很烂都不想给别人看