Canvas 文本填充线性渐变的使用详解

前言 在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。 猜想与答案 给出两个答案: 正确答案是图二,因为这样得出来的坐标生成的渐变最紧接文本矩形边界,它的运动轨迹如下动图: (图来源:Do you really know CSS linear-gradients) 渐变起点与终点坐标的计算 所以,渐变的起点与终点坐标该怎么计算呢?答: 先求得起点与终点的长度(距离)。 根据长度与文本矩形的中心点坐标分别计算出起点与终点坐标。 线性渐变长度的计算 W3C 给