canvas绘制渐变图形,canvas绘制圆形渐变色

　　前言

　　在Canvas中，用水平或垂直的线性渐变填充文本很容易，但用角度填充渐变就复杂多了。就像下面这样，假设文本矩形的宽度是W，高度是H，左上角的坐标是X，y。

　　猜想与答案

　　给出两个答案：

　　正确答案是图2，因为这样得到的坐标产生的梯度最接近文本的矩形边界，其轨迹如下：

　　(来源：你真的了解CSS线性渐变吗)

　　渐变起点与终点坐标的计算

　　那么，如何计算渐变的起点和终点的坐标呢？答：

　　先求起点和终点之间的长度(距离)。根据文本矩形的长度和中心点的坐标，分别计算起点和终点的坐标。直线渐变长度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))//Half-length:halfgradientLineLength=(ABS(w * cos(a))ABS(h * sin(a))/2那么这个公式是怎么来的呢？以下是作者的解决方案：

　　从图中可以得到下列等式：

　　因此，可以推断：

　　简化后，它是：

　　所以c1 c2是：

　　根据三角函数平方公式：cos(A) * cos(A)=1-sin(A) * sin(A)，代入c1 c2:

　　简化的第一步之后：

　　最后的结果是：

　　因为sin sin，cos在函数周期内有负值(见下面角度对应的三角形函数周期图)，所以线性梯度的长度需要取绝对值。

　　此时，我们知道了线性渐变的长度，并且文本矩形中心点的坐标很容易计算，即：

　　X=x w/2centrey=y h/2所以，起点和终点的坐标是：

　　startX=centex-cos(A)* Halfgradientlinelength starty=centerY sin(A)* Halfgradientlinelength ndx=centerX cos(A)* Halfgradientlinelength=centerY-sin(A)* Halfgradientlinelength查看最终效果。

　　经验注释

　　在计算三角函数时，要尽量避免先用tan，因为tan在其周期内取值无限大，需要做具体的条件判断，而Sin sin，cos则没有这样的问题，所以代码写的更简洁明了，不会因为疏忽而出错。见下面三角函数与角度对应的周期图。

　　参阅

　　你真的了解CSS线性渐变吗？

　　MDN线性梯度

　　W3C - CSS图像模块级别3 #线性渐变

　　以上就是本文对画布文字填充使用线性渐变的详细解释。更多画布文字填充线性渐变的相关内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。