13、探索绘图工具：创建 HTML5 画布柱形图

探索绘图工具：创建 HTML5 画布柱形图

在数据可视化领域，柱形图和条形图是比较常用的图表类型，它们可以通过一组矩形的宽度或高度来比较离散类别的值。本文将介绍线性插值的概念，并详细讲解如何使用 HTML5 画布从零开始创建一个简单的柱形图。

线性插值

线性插值是一种在两个值之间进行线性过渡的方法。对于表达式 (x - x0) / (x1 - x2) ，它会根据 x 在 x0 和 x1 之间的位置，解析为一个介于 0 和 1 之间的值。这个值可以作为权重，乘以 y 范围 (y1 - y0) ，使得当权重为 0 时， y = y0 ；当权重为 1 时， y = y1 。

线性插值不仅可用于用线段连接点，还可用于混合。如果想基于一个在 0 到 1 之间变化的时间值，在两个值之间进行线性动画混合，可以使用以下方程：

v = start + p * (end - start)

其中， p 是时间值， start 是起始值， end 是结束值。

可以将 x 轴想象成时间， y 值表示混合的中间值。 x 的移动可以简化为一个从 0 到