• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 用H5的canvas做出弹幕效果

用H5的canvas做出弹幕效果

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含canvas,html5,做出等相关知识,匿名希望在学习及工作中可以帮助到您
这次给大家带来用H5的canvas做出弹幕效果,用H5的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<div style="position:relative;width:500px;height:400px;text-align:center;">
    <video controls="controls" autoplay="autoplay" style="width:100%;height:100%;">
        <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" />
        <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" /> 
        Your browser does not support the video tag.
    </video>
    <canvas id="canvas" width="500" height="400" style="position:absolute;top:0;left:0;">
        您的浏览器不支持canvas标签。
    </canvas>
</div>//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);
    })
})();

1.gif

相信看了本文案例你已经掌握了方法,更多精彩请关注微课江湖其它相关文章!

推荐阅读:

前端开发中的SVG动画

canvas怎样做出黑色背景带特效碎屑烟花

以上就是用H5的canvas做出弹幕效果的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • canvas与html5实现视频截图功能示例
  • 详解html5 canvas常用api总结(二)--绘图API
  • HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
  • 详解使用HTML5 Canvas创建动态粒子网格动画
  • 解决canvas转base64/jpeg时透明区域变成黑色背景的方法
  • 用html5的canvas和JavaScript创建一个绘图程序的简单实例
  • HTML5 canvas基本绘图之图形组合
  • HTML5 canvas基本绘图之文字渲染
  • HTML5 canvas基本绘图之绘制曲线
  • HTML5 canvas基本绘图之图形变换

相关文章

  • 2017-08-06HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
  • 2018-12-03如何用SVG制作酷炫动态图标?(代码实例)
  • 2017-08-06HTML5本地存储之Web Storage应用介绍
  • 2018-12-03ngAnimate插件是做什么的?
  • 2018-12-03总结Html5表单(二) input type 各种输入, 各种用户选择,上传
  • 2017-08-06一张图片能隐含千言万语之隐藏你的程序代码
  • 2017-08-06HTML5 本地存储之如果没有数据库究竟会怎样
  • 2018-12-03HTML5能否在一定程度上代替移动APP?
  • 2018-12-03html5小游戏在微信朋友圈火,你怎么看这件事?
  • 2018-12-03jQuery超酷3D包装盒封面旋转特效

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5和以前HTML4的区别整理_html5教程技巧
    • 小强的HTML5移动开发之路(44)——JqueryMobile中的按钮
    • 微信5.0打飞机游戏是web app吗?
    • Angular下H5多张上传图片的方法
    • 22个HTML5 技巧二
    • 小强的HTML5移动开发之路(9)——坦克大战游戏3
    • 分享一个HTML5实现拖放的实例代码
    • HTML5 File接口在web页面上使用文件下载
    • 移动web模拟客户端实现多方框输入密码效果【附代码】
    • 浏览 GitHub 项目的目录结构时,点击一个目录或文件链接是如何做到局部刷新,URL 同时被更新,这是什么原理?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有