快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

如何使用html5的canvas做出弹幕效果-创新互联

这篇文章将为大家详细讲解有关如何使用html5的canvas做出弹幕效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

在溧水等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站建设、成都网站设计 网站设计制作按需定制网站,公司网站建设,企业网站建设,品牌网站设计,成都全网营销,外贸营销网站建设,溧水网站建设费用合理。

canvas知识

绘制文字

let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');ctx.font = '20px Microsoft YaHei';          //字体、大小ctx.fillStyle = '#000000';                  //字体颜色ctx.fillText('canvas 绘制文字', 100, 100);   //文本，字体x,y坐标

文本宽度

ctx.measureText('文本宽度').width

清除绘制内容

ctx.clearRect(0, 0, width, height);

实现步骤

1、创建canvas元素利用绝对定位覆盖在视频上
2、创建Barrage类，添加的弹幕缓存到弹幕列表中，并记录相应弹幕信息
3、绘制弹幕文本，用文本偏移量控制移动速度
4、计算当文本超出画布时移出弹幕列表

代码

//html
    
        
         
        Your browser does not support the video tag.
    
    
        您的浏览器不支持canvas标签。
    
//js(function () {    class Barrage {         constructor(canvas) {             this.canvas = document.getElementById(canvas);             let rect = this.canvas.getBoundingClientRect();             this.w = rect.right - rect.left;             this.h = rect.bottom - rect.top;             this.ctx = this.canvas.getContext('2d');             this.ctx.font = '20px Microsoft YaHei';             this.barrageList = [];         }        //添加弹幕列表         shoot(value) {             let top = this.getTop();             let color = this.getColor();             let offset = this.getOffset();             let width = Math.ceil(this.ctx.measureText(value).width);             let barrage = {                 value: value,                 top: top,                 left: this.w,                 color: color,                 offset: offset,                 width: width             }             this.barrageList.push(barrage);         }        //开始绘制         draw() {            if (this.barrageList.length) {                 this.ctx.clearRect(0, 0, this.w, this.h);                for (let i = 0; i < this.barrageList.length; i++) {                     let b = this.barrageList[i];                    if (b.left + b.width <= 0) {                         this.barrageList.splice(i, 1);                         i--;                        continue;                     }                     b.left -= b.offset;                     this.drawText(b);                 }             }             requestAnimationFrame(this.draw.bind(this));         }        //绘制文字         drawText(barrage) {             this.ctx.fillStyle = barrage.color;             this.ctx.fillText(barrage.value, barrage.left, barrage.top);         }        //获取随机颜色         getColor() {            return '#' + Math.floor(Math.random() * 0xffffff).toString(16);         }        //获取随机top         getTop() {            //canvas绘制文字x,y坐标是按文字左下角计算，预留30px             return Math.floor(Math.random() * (this.h - 30)) + 30;         }        //获取偏移量         getOffset() {            return +(Math.random() * 4).toFixed(1) + 1;         }     }     let barrage = new Barrage('canvas');     barrage.draw();    const textList = ['弹幕', '666', '233333333',          'javascript', 'html', 'css', '前端框架', 'Vue', 'React',        'Angular','测试弹幕效果'     ];     textList.forEach((t) => {         barrage.shoot(t);     }) })();

如何使用html5的canvas做出弹幕效果

关于“如何使用html5的canvas做出弹幕效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


当前名称：如何使用html5的canvas做出弹幕效果-创新互联
转载源于：http://6mz.cn/article/jdgdc.html

其他资讯