2017年8月8日
一、思路
对比 odemeter.js 方式。
弊端：生成了太多 DOM。性能瓶颈。
初始方案： 使用数张临时canvas来获取每位数上的当前绘制位置
思路也是跟着 odemeter.js 形式，简化 DOM，只使用数张临时 canvas DOM。
- 根据位数生成数张 临时canvas
- 每一个canvas有单独的 TWEEN 控制位移
- 使用 getImageData 从 “临时canvas” 中获取信息
- 使用 putImageData 绘制到主画布中去
- 每个 TWEEN 的 duration 是一样的，但其对应的值容量不同，故速度不同。
优化方案： 直接去 fillText，反正超出画布区域自然不可见
通过 tween.JS 获取 y 值
二、具体实现
1. 获取起始数值之间的“插值”数字数组
起始差值大于阈值的，从总体中取出的一部分个体。
- 阈值：
- 翻动动效时长(duration)越长，阈值越大
MAX_VALUES = ((c.duration / MS_PER_FRAME) / FRAMES_PER_VALUE) | 0;
- 抽样规则：
- 间隔值 =
差值/阈值(1+boosted*DIGIT_SPEEDBOOST) - boosted: boosted初始值是0，越靠近低位数，boosted越大
- 即：越靠近低位数，间隔值越小，样本值相对更多
- 间隔值 =
待对比测试：
“间隔取值” 在odemeter.js中是为了优化性能，因为没必要生成过多的DOM。然而在canvas中，并不存在大量 DOM 的情况，那么是否还需要间隔取值？若完全模拟真实世界的进位，是会带来视觉的更逼真，还是会因其低位转速过快，反而使得视觉上不舒适？
2. 滚动动效：使用 TWEEN.JS 获取 y 值
3. 小数点
生成衍值时，需跳过小数点
4. 分隔符
odemeter.js 做法，倒序，render 数字时，再判断是否到了render 分隔符的时机
分隔符，format；
修改 计算衍值函数 ，返回
[ [...], ",", [...], [...], [...], ".", [...], [...], [...]]
5. 对齐方式
在 DOM+CSS 布局中,对齐方式的切换很简单，选择css属性 text-align: left,text-align: center,text-align: right 即可。
Canvas 中虽亦有对齐方式相关的属性 textAlign ,但它控制的只是当前画笔的位置。
遇到的问题
1. 字号调小时，头部被截断
问题描述
当用户把字号调小(60 -> 30)时，出现头部被截断的问题。
出现原因：
之前开发时，以“60px 宋体”为模本，并给予了一个外部 offset 偏移量去矫正数字的位置。而当字号缩小时，这个偏移值便出现误差了。如字体大小为 60 时，给予了默认 offset 为 10，当字体大小变成 30 时，offset 明细已经不合适了。
解决方案：
这个 offset 不能是固定值，而是跟随着字体大小。暂时设置为字体大小的 1/6；
本质问题：
每种 font-family 下，字体的高度和边距不一致。
不同的 baseline 下的情况如下：
举例：Times
举例：宋体
优化方案：
- 基本 baseline 设置为 bottom；（原来是 alphabetic ）
- 给予画布一个上下边距值，并拉大滚动字体垂直的行距；
2. 数字模糊的问题
canvas 绘制的数字，没有 dom 节点那样清晰。这是由其根本性质决定的（canvas是以像素描述图形的位图，dom是矢量描述），在高分屏下，边缘模糊尤其明显。
解决方案：
- 针对高分屏，预获取屏幕物理尺寸，针对canvas画布宽度，给予比画布原始尺寸大一倍的宽度，再压缩至原始宽度。
- 针对“边缘锐化”的一些优化？
