前端高级之路：写一个高逼格可视化“圆环

// 计算圆弧上某点的坐标 
// originX, originY - 圆心的坐标 
// radius - 圆环半径，等于圆环内、外径的平均值，也即圆弧中线的半径 
// alpha - 弧度 
function calcPosition(originX, originY, radius, alpha) { 
  return [ 
    radius * Math.cos(alpha) + originX, 
    radius * Math.sin(alpha) + originY, 
  ]; 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

// 以起始端的半圆倒角为例 
myCanvas.context.arc( 
  x, 
  y, 
  (radiusOutter - radiusInner) / 2,     // 小圆半径，等于圆环线宽的一半 
  radianStart - Math.PI, 
  radianStart 
); 
1.
2.
3.
4.
5.
6.
7.
8.

// 用于实现颜色插值的工具类 
export default class ColorInterpolate { 
  // 参数01: stops - 为要插值的颜色序列，数据格式形如：[[0, 'red'], [0.5, 'green'], [1.0, 'yellow']] 
  // 参数02: segment - 插值段落数，即插值结果的颜色值的数量 
  constructor(stops = [], segment = 100) { 
    // 构建离屏 canvas 
    const canvas = document.createElement('canvas'); 
    canvas.width = segment; 
    canvas.height = 1; 
    this.ctx = canvas.getContext('2d'); 
 
    // 绘制线性渐变 
    const gradient = this.ctx.createLinearGradient(0, 0, segment, 0); 
    for (let [offset, color] of stops) { 
      gradient.addColorStop(offset, color); 
    } 
 
    this.ctx.fillStyle = gradient; 
    this.ctx.fillRect(0, 0, segment, 1); 
  } 
 
  // 根据位置偏移量获取插值后的色值 
  getColor(offset) { 
    const imgData = this.ctx.getImageData(offset, 0, 1, 1); 
    return `rgba(${imgData.data.slice(0, 3).join(',')}, ${imgData.data[3] / 255})`; 
  } 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

// 注：伪代码，真实场景建议 OOP 方式包装为工具类 
 
let _animTick = null; 
let _animFrames = null; 
let _frameData = null; 
let _animDiff = null; 
 
// 动画方法 
function _animate(duration) { 
  if (_animTick === null) { 
    // 根据动画时长 duration 计算整个动画一共需要多少帧（以 60fps 计算） 
    _animFrames = Math.round((duration / 1e3) * 60); 
 
    // 相邻两帧动画的数据变化 
    _animDiff = _calcAnimDiff(_animFrames); 
 
    // 动画帧数标识 
    _animTick = 0; 
  } 
 
  // 当前帧的数据值 
  _frameData = _caclCurentData(_animDiff, _animTick); 
  _renderFrame(_frameData); 
 
  if (_animTick !== null && _animTick < _animFrames) { 
    // 继续执行动画 
    window.requestAnimationFrame(() => { 
      _animate(); 
      _animTick += 1; 
    }); 
  } else { 
    // 动画结束 
    _renderFrame(_frameData); 
    _animTick = null; 
  } 
} 
 
// 绘制当前帧 
function _renderFrame(data) { 
  // ... 
} 
 
// 计算动画相邻帧的数据差异 
function _calcAnimDiff() { 
  // ... 
} 
 
// 根据两帧数据差计算当前帧 
function _caclCurentData() { 
  // ... 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.