获取画布
| 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进行重绘。当存在多条弹幕的情况下,定义：
| let colorArr=_this.getColor(color); 弹幕数组多对应的颜色数组 let numArrL=_this.getLeft(); 弹幕数组所对应的x坐标位置数组 let numArrT=_this.getTop(); 弹幕数组所对应的y坐标位置数组 let speedArr=_this.getSpeed(); 弹幕数组所对应的弹幕移动速度数组 |
定时的重绘弹幕函数为：
| _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); |
实现的效果为：
4. canva弹幕的扩展功能
通过canvas实现弹幕的方式，很方便做比如暂停弹幕滚动等扩展功能，此外，也可以给弹幕增加头像，给每条弹幕增加边框等等功能，以后再补充。
最后给一个简单的react弹幕组件；https://github.com/forthealllight/react-barrage
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
