wap版头条的下拉刷新

• 之前的版本，需要整体移动内容区域——在低配手机上，存在下拉卡顿的现象。
• 做了相应优化，但效果不甚满意
• 其结果会导致用户下拉刷新的欲望减弱，进而会影响广告的投放效果

新版下拉刷新

采用Android上新版Google Gmail的下拉刷新的实现方式

绘图方法介绍

• Canvas API
  • context = canvas.getContext('2d')
  • context.arc
    • X
    • Y
    • Radius
    • startAngle
    • endAngle
    • isCounterClockwise

绘图方法介绍（二）

• Canvas API（续）
  • context.lineWidth
  • context.color
  • context.globalCompositeOperation
    • source-out & destination-out

绘图方法介绍（三）

• 带箭头圆弧的绘制方法

绘图方法介绍（四）

• 绘制后擦除
  • source-out & destination out(用于擦除)

那些年，我们一起爬过的坑

• 圆弧绘制中遇到锯齿
  • 原因是每次都是从起点画起，重叠部分出现了锯齿边
  • 采用每次画前clearRect清屏，再画
  • 但仍然不理想
  • 最后采取手段是
    • 用较大长宽的Canvas画图，并用样式缩小到合适比例
    • 200*200的区域，画100半径的园，然后缩小到40px

那些年，我们一起爬过的坑（二）

• 向后兼容，优雅降级
  • 对Canvas不支持或者支持不好的，采用图片+css3