方法一、实时渲染
01）在body建立canvas
02）在ctx=canvas.getContext('2d')上绘制n个微透明的圆
03）绘制效果是颜色叠加'lighter'，透明度0.3
ctx.globalCompositeOperation = 'lighter';效果如下
04）从上图可以看到，随着圆形的叠加，重叠的部分就逐渐不透明并呈现为白色，因此动画思路就是画N个圆，每次在移动他们的位置和大小，这样就形成了火堆心部最亮成白色，在往上就形成
本文介绍了两种使用canvas制作火焰效果的方法。方法一是实时渲染，通过不断改变微透明圆的位置和大小，形成火焰燃烧的效果，但计算量较大。方法二是位图渲染，预先绘制好不同颜色的圆，然后根据数组信息动态复制到显示画布，减少实时计算，代码量相对较多。
最低0.47元/天 解锁文章
扫一扫
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
