canvas实现扫描动画

1、扫描效果

        

2、技术选型

    1) CSS3 使用两个元素，通过移动遮罩元素来实现圆面积变小（圆使用border-radius:50%可以实现）

            问题：通过这个遮罩元素实现圆面积变化，无法实现透明，会遮住底部背景

    2) canvas绘制动画，通过使用requestAnimationFrame绘制动画

            问题： a.圆面积会变化 b.横线的长度变化 c.性能问题

    总结：技术1（CSS3）实现动画，其遮住背景，暂时无解决方案，所以选择canvas进行绘制

3、开发实现

    1)圆面积变化

           实现： 绘制一个圆，使用clearRect方法擦除变化面积，可以实现圆面积变化

    2)线条长度变化

            实现：如果实现使用计算得到线条长度变化值，来绘制一根线条，这样的计算太复杂，所以我使用clip裁剪，

绘制一个线条，只展示与圆重叠部分，这样可以实现线条长度变化

    3)性能使用requestAnimationFrame方法绘制动画，不停的调研canvasAPI会导致canvas绘制越来越慢，性能解决这块使用

离屏canvas（此处不做赘述，后有详解）

4、代码实现