mmx实现图片淡入淡出_基于 HTML5 Canvas 实现的文字动画特效

前言

文字是网页中最基本的元素，一般我们在网页上都是展示的静态文字，但是就效果来说，还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用，如果有某些关键的文字，可以通过这种动态的效果来提醒用户阅读。

动态效果图

这个 Demo 是不断重复地设置文字的大小和透明度，这些英文字母也是我自己利用 HT 的矢量绘制的，总的来说效果还是不错的。

代码实现

代码总共一百来行，比较简单，前面说过我的英文字母是用矢量绘制的，用矢量绘制图形的好处非常多，比如图片缩放不会失真，这样在不同的 Retina 显示屏上我也不需要提供不同尺寸的图片；还有就是用 JSON 的方式来描述矢量，格式比较简洁等等。

矢量图片

接下来绘制这些矢量图片(这里只拿出第一个 H 进行说明)：

{ "width": 10,//设置矢量的宽 "height": 10,//设置矢量的高 "comps": [//矢量图形的组件Array数组，每个数组对象为一个独立的组件类型，数组的顺序为组件绘制先后顺序 { "type": "text