Skip to content

Canvas实现bilibili直播页面礼物连击效果

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.md
Notifications You must be signed in to change notification settings

evollhhan/bilibili-super-gift

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

##canvas实现道具连击效果

使用到的库:createjs

####1.背景绘制 背景云朵部分在没有指定图片的情况下使用JS绘画,保证矢量图片在缩放时不会产生锯齿。 为了保证绘画效果,可以先在绘图软件绘制,然后导出为SVG,再将SVG转换为canvas绘画语句。

SVG to Canvas:http://www.professorcloud.com/svg-to-canvas/

####2.GIF播放 GIF在canvas下只能绘制第一帧,需要自行转成png序列,再通过遮罩显示指定的帧。

####3.道具动画衔接 默认同一时间只能显示最多3个道具,多余的道具会加入队列,并等待动画道具退出屏幕时再加入。

####4.中文字符长度的计算 英文与中文字符的长度比例大致为1:1.2,在windows平台下以微软雅黑字体显示时基本能保证位置。这个计算的值同样可以用来模拟css中的text ellipsis的效果。

问:如何判断中文字符?

答: 这里只是用了投机的方法,还未经过严谨的论证,即中文字符和一些特殊字符在 encodeURI() 后的长度大于等于9

About

Canvas实现bilibili直播页面礼物连击效果

Resources

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.md

Stars

Watchers

Forks

Releases

No releases published

Packages