前言在Canvas中用水平或垂直线性渐变填充文本很容易实现，而带有角度的渐变要复杂得多；如下图，假设文字矩形的宽为W，高为H，左上角坐标为X，Y。猜答给出两个答案：正确答案为图2，因为这样得到的坐标生成的渐变最接近文本矩形的边框，其运动轨迹如下：（来源：你真的了解CSSlinear-Gradients）起点和终点坐标的计算渐变那么，如何计算渐变的起点和终点的坐标呢？答案：先求出起点和终点之间的长度（距离）。根据文本矩形的长度和中心点坐标分别计算起点和终点坐标。线性渐变长度W3C的计算给出了一个公式（A代表角度）：gradientLineLength=abs(W*sin(A))+abs(H*cos(A))但是这个公式主要应用于线性渐变的设置CSS，即以12点为0°顺时针旋转。我们需要的是在3点位置逆时针旋转0°，即公式为：gradientLineLength=abs(W*cos(A))+abs(H*sin(A))//半长：halfGradientLineLength=(abs(W*cos(A))+abs(H*sin(A)))/2那么这个公式是怎么来的呢？以下是笔者的解法：由图可得以下方程：故可推导出：化简后为：故c1+c2为：由三角函数平方公式可知：cos(A)*cos(A)=1-sin(A)*sin(A)，代入c1+c2：经过第一步化简：最后的结果是：因为sin,cos在函数中有负值cycle（见下面角度对应的三角函数循环图），所以线性梯度的长度需要取绝对值。至此，我们知道了线性渐变的长度，文本矩形的中心点坐标就很容易计算了，即：centerX=X+W/2centerY=Y+H/2所以，开始的坐标点和终点分别是：startX=centerX-cos(A)*halfGradientLineLengthstartY=centerY+sin(A)*halfGradientLineLengthendX=centerX+cos(A)*halfGradientLineLengthendY=centerY-sin(A)*halfGradientLineLength看最后的效果经验说明在进行三角函数计算时，尽量避免使用tan，因为tan在其循环中有无穷大的值，需要进行具体的条件判断，而sin和cos则没有这个问题，代码写的更简洁明了，并且不会因为疏忽而发生错误。见下面三角函数与角度的对应关系。图片。参见你真的了解CSS线性渐变吗？MDNlinear-gradientW3C-CSSImagesModuleLevel3#linear-gradients
