用H5的canvas做出弹幕效果


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来用H5的canvas做出弹幕效果用H5的canvas做出弹幕效果的注意事项有哪些,下面就是实战案例,一起来看一下。

canvas知识

绘制文字

1

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坐标

文本宽度

1

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

清除绘制内容

1

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

实现步骤

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

代码

阅读剩余部分

相关阅读 >>

html5 高级教程--拖放 api 实现拖放排序

h5实现多图片预览上传及点击可拖拽控件

浅谈html5新增及移除的元素

h5中文件上传下载实例

html5表单相关元素和属性

怎么用canvas压缩图片

html5拖放关于api实现拖放排序的实例代码

html5中pattern属性的用法详解

html5 meter标签是什么意思?html5 meter标签的用法及属性介绍

妙味课堂html5视频资料分享

更多相关阅读请进入《canvas》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...