这篇文章将为大家详细讲解有关使用帆布文本填充线性渐变的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>前言
在画布中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多,就好像下面这样,假设文本矩形宽为<代码> W> H> X, Y 。
<强>猜想与答案
给出两个答案:
正确答案是图二,因为这样得出来的坐标生成的渐变最紧接文本矩形边界,它的运动轨迹如下动图:
(图你真的知道CSS linear-gradients)
<强>渐变起点与终点坐标的计算
所以,渐变的起点与终点坐标该怎么计算呢?答:
先求得起点与终点的长度(距离)。
<李>根据长度与文本矩形的中心点坐标分别计算出起点与终点坐标。
线性渐变长度的计算W3C给出了一个公式(表示角度):
不过,该公式主要应用于CSS的线性渐变设置,即以12点钟方向为0,度,顺时针旋转。
而我们需要的是3点以钟方向为0,度,逆时针旋转,即公式为:
那么这个公式是怎么来的呢?以下是笔者的求解:
由图可得以下方程组:
因此可推导出:
化简后为:
所以<代码> c1 + c2>
由三角函数平方公式知:<代码> cos (A) * cos (A)=1 - sin() *罪(A)> c1 + c2 :
第一步化简后:
最后的结果就是:
因为<代码>罪恶,因为在函数周期内存在负值(见下面角度对应的三角函数周期图),所以线性渐变的长度需要取绝对值。
至此,我们知道了线性渐变长度,文本矩形的中心点坐标很好算,即:
所以,起点与终点的坐标分别为:
看看最终效果
<强>经验注释
进行三角函数计算时,应尽量避免先用<代码>棕褐色> 在其周期内存在无穷值,需要做特定的条件判断,而<代码>罪恶,因为没有此类问题,代码书写更为简洁清晰并且不会因疏忽产生错误,见下面三角函数与角度的对应关系周期图。
