canvas真是个好东西，页面动画玩的可真的厉害，本例子就是一个美丽动画心形树叶，早个10年，这一种动画大部分都是flash能搞，现在canvas真的强大。

1.基本使用

1. 本例子，主要是通过index.html中，调用相关的js来实现的，有几个初始化的地方，配置一下，效果就出来了。
2. 信封文字，在这里搞了全局变量textDta={}来进行设置，可以参考源码执行修改；
3. 配置开始时间，计算距离现在多少天多少时间，代码如下：

   var textAnimate = eval(Jscex.compile("async", function () {
        var together = new Date();
        together.setFullYear(2022,8,1);        //时间年月日
        together.setHours(12);                    //小时    
        together.setMinutes(0);                    //分钟
        together.setSeconds(0);                    //秒前一位
        together.setMilliseconds(0);            //秒第二位
        $("#code").show().typewriter();
        $("#clock-box").fadeIn(500);
        while (true) {
            timeElapse(together);
            $await(Jscex.Async.sleep(1000));
        }
   }));

4. 修改打开的情书内容：就直接修改html中对应的内容就行。

2.知识点

1. $(window).resize()的窗口的大小，被经过修改后的事件响应，加固jquery的基础知识。
2. jquery的自定义函数，加入到jquery基本函数中的方法：

   //打字效果，为jquery添加自定义方法函数
   //注意this的使用
   $.fn.typewriter = function() {
        this.each(function() {
        });
        return this;
   };
   //方法调用
   $("#code").show().typewriter();

3. 其他都是canvas与有关一些库jscex的使用，有兴趣请参考专门的课程。

关注精益资源-动画效果插件，各种cool组件顺手拈来。