欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-19 12:32:55
Canvas 文本填充线性渐变的使用详解这篇文章主要介绍了Canvas 文本填充线性渐变的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 20-06-22...

前言

在 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 文本填充线性渐变的使用详解

参阅

do you really know css linear-gradients?

mdn linear-gradient

w3c - css images module level 3 # linear-gradients

到此这篇关于canvas 文本填充线性渐变的使用详解的文章就介绍到这了,更多相关canvas文本填充线性渐变内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!