DDR爱好者之家

Canvas 文本填充线性渐变的使用详解
站长资源 2024/11/23 佚名
8 1538
DDR爱好者之家 Design By 杰米

前言

在 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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米