这段代码就是又创建了一个 canvas 标签，然后再 star 的原型中有一个 cache 方法，这个 cache 方法就是在刚刚创建的 canvas 中绘制 star，而不是直接在原来的 canvas 画布中绘制的。

cache : function () { this.cacheCtx.save(); this.cacheCtx.fillStyle = this.color; this.cacheCtx.shadowColor = "white"; this.cacheCtx.shadowBlur = this.r * 2; this.cacheCtx.beginPath(); this.cacheCtx.arc(this.r * 3, this.r * 3, this.r, 0, 2 * Math.PI); this.cacheCtx.closePath(); this.cacheCtx.fill(); this.cacheCtx.restore(); },

之后我们需要将我们绘制的离屏 canvas 使用 drawImage 方法插入到我们最先开始创建的 canvas 画布中。

这里要注意的是，创建的离屏 canvas 的大小，因为太大的话同样会浪费性能，所以我们可以创建和我们每一个 star 粒子相同的 canvas ，但是这个例子中不适用，要将离屏的 canvas 设置的稍微大一些，因为我们还需要设置发光的效果（也就是设置阴影）。

发福利

发福利的时间到了~╰(￣▽￣)╭，很多小伙伴对 canvas 不是很感兴趣，但是想直接使用这个效果，于是我就将其封装起来，你只需要引入这个 JS，在 HTML 中添加一个 id 为 canvas 的标签，然后设置相应的 CSS 就可以~

github 下载地址： github.com/sunshine940…

在 README 中有使用方法~因为是第一次自己封装函数，自己一个人在不停的摸索中前进，所以还有很多的不足，希望有大神可以指点一二~

分享给小伙伴们：

本文标签： canvas/">canvas

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻