Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

浅谈canvas中的拖尾效果

nobody-junior 2019-02-16 17:14:00 阅读数:281 评论数:0 点赞数:0 收藏数:0

引言

很早就想了解以下 canvas 中的拖尾效果(如彗星,烟花等效果)是怎么实现的,但是一直没有深入了解,正巧在 codepen 上看到一个 demo,代码简单,效果炫酷,故有此文。

什么黑科技

在我的想象中,实现这种效果是一定需要一个数组的,用来储存彗星的尾巴的位置,透明度,生命时长等信息。然后遍历这个数组,将这个尾巴画在 canvas 上。然而,万万没想到,真正的实现却简单的不像实力派,不需要 数组, 真正起作用来实现拖尾效果的关键是位于 clearCanvas 函数下面的三行代码:

 ctx.fillStyle="rgba(0,0,0,0.2)"
ctx.rect(0,0,w,h);
ctx.fill();

这里的技巧在于,在重绘制下一帧前,不是调用clearRect清除掉上一帧的内容,而是在上一帧基础上加上一个半透明蒙层,然后继续画下一帧。画的帧数多了,也就有了拖尾效果,拖尾效果的长短,跟蒙层的透明度有关,透明度越小,拖尾越长。如果你看到这里就明白了,那可以关掉这个页面了,否则的话就跟我一起来实现一个流星吧。

实现一个流星

效果如下:

如上所述,这个demo也是在绘制完一帧后,绘制下一帧之前,添加一层半透明蒙层,最终形成拖尾的效果

function draw() {
// 绘制流星
for(let star of stars){
star.draw()
star.move()
}
// 这里在不断加半透明蒙层,使上一帧的流星变淡
ctx.fillStyle = 'rgba(0,0,0,0.1)'
ctx.rect(0,0,800,600)
ctx.fill()
requestAnimationFrame(draw)
}

全部代码见codepen,本文完

版权声明
本文为[nobody-junior]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/imgss/p/10387222.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领