使用Canvas文本填充线性渐变的案例-创新互联

这篇文章将为大家详细讲解有关使用Canvas文本填充线性渐变的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联专注于企业营销型网站建设、网站重做改版、萝北网站定制设计、自适应品牌网站建设、H5页面制作商城开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为萝北等各大城市提供网站开发制作服务。

前言

在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为W, 高为H, 左上角坐标为X, Y

使用Canvas文本填充线性渐变的案例

猜想与答案

给出两个答案:

使用Canvas文本填充线性渐变的案例

正确答案是图二,因为这样得出来的坐标生成的渐变最紧接文本矩形边界,它的运动轨迹如下动图:

使用Canvas文本填充线性渐变的案例

(图来源:Do you really know CSS linear-gradients)

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

所以,渐变的起点与终点坐标该怎么计算呢?答:

  1. 先求得起点与终点的长度(距离)。

  2. 根据长度与文本矩形的中心点坐标分别计算出起点与终点坐标。

线性渐变长度的计算 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

那么这个公式是怎么来的呢?以下是笔者的求解:

使用Canvas文本填充线性渐变的案例

由图可得以下方程组:

使用Canvas文本填充线性渐变的案例

因此可推导出:

使用Canvas文本填充线性渐变的案例

化简后为:

使用Canvas文本填充线性渐变的案例

所以c1 + c2 为:

使用Canvas文本填充线性渐变的案例

由三角函数平方公式知:cos(A) * cos(A) = 1 - sin(A) * sin(A), 代入c1 + c2

使用Canvas文本填充线性渐变的案例

第一步化简后:

使用Canvas文本填充线性渐变的案例

最后的结果就是:

使用Canvas文本填充线性渐变的案例

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

至此,我们知道了线性渐变长度,文本矩形的中心点坐标很好算,即:

centerX = X + W / 2
centerY = Y + H / 2

所以,起点与终点的坐标分别为:

startX = centerX - cos(A) * halfGradientLineLength
startY = centerY + sin(A) * halfGradientLineLength

endX = centerX + cos(A) * halfGradientLineLength
endY = centerY - sin(A) * halfGradientLineLength

看看最终效果

使用Canvas文本填充线性渐变的案例

经验注释

进行三角函数计算时,应尽量避免先用tan, 因为tan 在其周期内存在无穷值,需要做特定的条件判断,而sin, cos 没有此类问题,代码书写更为简洁清晰并且不会因疏忽产生错误,见下面三角函数与角度的对应关系周期图。

使用Canvas文本填充线性渐变的案例

关于“使用Canvas文本填充线性渐变的案例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前题目:使用Canvas文本填充线性渐变的案例-创新互联
网页链接:http://scyanting.com/article/dosdcp.html