用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的强大与未来发展

值得一个的5个强大的html5api 函数

html5视频音频实现步骤

html5 canvas基本绘图之绘制线条

关于html5你不得不知的事

html5 canvas学习的实例介绍

html5播放视频教程

html5 localstorage知识点总结

h5如何做出碎片式的图片切换

html5 中的一些有趣的新特性

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




打赏

取消

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

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

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

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

评论

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