canvas 多次画图效果_我复现了一下人民日报的 “点亮”效果。

原版链接：

今天，发条微信一起点亮武汉

一看到这个效果时，我立马认为是JavaScript(以下简称js)的点击事件，通过给图片添加点击事件改变其css样式实现的，于是几乎不加动脑的就写出了以下代码。

在网页端测试，基本可以实现点亮的效果。但是有几个细节和问题需要注意：

1. 人民日报的效果中还有文字的显示

   如果在js中再多加一个控制文本显示的效果，做起来成本有些大(主要是时间成本)，移动端还要加touchstart事件，原版肯定不是这么做的。

2. 稍加思考就会发现，这其实是两张图的叠加，包括一张灰色的图和一张彩色带文案的图。

3. 图片点亮的过程里，重复点击是没有效果的，并且动画完成之后，再次点击又可以点亮一遍，所以想用js完全复原原版的效果的话，还要加防抖，重复增删css样式....显然也比较麻烦。

4. 最重要的一点，微信公众号的文章，不！支！持！添加JavaScript代码?

   所以以上用js控制点亮的做法，行不通。

怎么办 

HTML5 还有两个支持动画的标签 canvas 跟svg&#x