canvas实现弹幕效果及扩展功能

3. canvas实现弹幕

除了通过css实现弹幕的方法之外，通过canvas也可以实现弹幕。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9594.html

通过canvas实现弹幕的原理就是时时的重绘文字，下面来一步步的实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9594.html

• 获取画布

    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
复制代码

• 绘制文字

    ctx.font = '20px Microsoft YaHei';          
    ctx.fillStyle = '#000000';                
    ctx.fillText('canvas 绘制文字', x, y);
复制代码

上面的fillText就是实现弹幕效果的主要api，其中x表示横方向的坐标，y表示纵方向的坐标，只要时时的改变x，y进行重绘，就可以实现动态的弹幕效果。
复制代码

• 清除绘制内容

    ctx.clearRect(0, 0, width, height);
复制代码

• 具体实现

通过定时器，定时改变x,y,每次改变之前先进性清屏，然后根据改变后的x,y进行重绘。当存在多条弹幕的情况下,定义：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9594.html

    let colorArr=_this.getColor(color);  弹幕数组多对应的颜色数组
    let numArrL=_this.getLeft();  弹幕数组所对应的x坐标位置数组
    let numArrT=_this.getTop();  弹幕数组所对应的y坐标位置数组
    let speedArr=_this.getSpeed(); 弹幕数组所对应的弹幕移动速度数组
复制代码

定时的重绘弹幕函数为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9594.html

_this.timer=setInterval(function(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    for(let j=0;j<barrageList.length;j++){
      numArrL[j]-=speedArr[j];
      ctx.fillStyle = colorArr[j]
      ctx.fillText(barrageList[j],numArrL[j],numArrT[j]);
      ctx.restore();
 },16.7);
复制代码

实现的效果为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9594.html

4. canva弹幕的扩展功能

通过canvas实现弹幕的方式，很方便做比如暂停弹幕滚动等扩展功能，此外，也可以给弹幕增加头像，给每条弹幕增加边框等等功能，以后再补充。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9594.html

最后给一个简单的react弹幕组件；https://github.com/forthealllight/react-barrage文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9594.html