前言
在 Canvas 中對(duì)文本填充水平或垂直的線性漸變可以輕易實(shí)現(xiàn)，而帶角度的漸變就復(fù)雜很多；就好像下面這樣，假設(shè)文本矩形寬為 W, 高為 H, 左上角坐標(biāo)為 X, Y。
猜想與答案
給出兩個(gè)答案：
正確答案是圖二，因?yàn)檫@樣得出來(lái)的坐標(biāo)生成的漸變最緊接文本矩形邊界，它的運(yùn)動(dòng)軌跡如下動(dòng)圖：
(圖來(lái)源：Do you really know CSS linear-gradients）
漸變起點(diǎn)與終點(diǎn)坐標(biāo)的計(jì)算
所以，漸變的起點(diǎn)與終點(diǎn)坐標(biāo)該怎么計(jì)算呢？答:
- 先求得起點(diǎn)與終點(diǎn)的長(zhǎng)度（距離）。
- 根據(jù)長(zhǎng)度與文本矩形的中心點(diǎn)坐標(biāo)分別計(jì)算出起點(diǎn)與終點(diǎn)坐標(biāo)。
線性漸變長(zhǎng)度的計(jì)算 W3C 給出了一個(gè)公式（A 表示角度）：
gradientLineLength = abs(W * sin(A)) + abs(H * cos(A))
不過(guò)，該公式主要應(yīng)用于 CSS 的線性漸變?cè)O(shè)置，即以 12 點(diǎn)鐘方向?yàn)?0°，順時(shí)針旋轉(zhuǎn)。
而我們需要的是以 3 點(diǎn)鐘方向?yàn)?0°，逆時(shí)針旋轉(zhuǎn)，即公式為：
gradientLineLength = abs(W * cos(A)) + abs(H * sin(A))
// 半長(zhǎng)：
halfGradientLineLength = (abs(W * cos(A)) + abs(H * sin(A))) / 2
那么這個(gè)公式是怎么來(lái)的呢？以下是筆者的求解：
由圖可得以下方程組：
因此可推導(dǎo)出：
化簡(jiǎn)后為：
所以 c1 + c2 為：
由三角函數(shù)平方公式知：cos(A) * cos(A) = 1 - sin(A) * sin(A)， 代入 c1 + c2：
第一步化簡(jiǎn)后：
最后的結(jié)果就是：
因?yàn)?sin, cos 在函數(shù)周期內(nèi)存在負(fù)值（見(jiàn)下面角度對(duì)應(yīng)的三角函數(shù)周期圖），所以線性漸變的長(zhǎng)度需要取絕對(duì)值。
至此，我們知道了線性漸變長(zhǎng)度，文本矩形的中心點(diǎn)坐標(biāo)很好算，即：
centerX = X + W / 2
centerY = Y + H / 2
所以，起點(diǎn)與終點(diǎn)的坐標(biāo)分別為：
startX = centerX - cos(A) * halfGradientLineLength
startY = centerY + sin(A) * halfGradientLineLength
endX = centerX + cos(A) * halfGradientLineLength
endY = centerY - sin(A) * halfGradientLineLength
看看最終效果
經(jīng)驗(yàn)注釋
進(jìn)行三角函數(shù)計(jì)算時(shí)，應(yīng)盡量避免先用 tan, 因?yàn)?tan 在其周期內(nèi)存在無(wú)窮值，需要做特定的條件判斷，而 sin, cos 沒(méi)有此類問(wèn)題，代碼書(shū)寫(xiě)更為簡(jiǎn)潔清晰并且不會(huì)因疏忽產(chǎn)生錯(cuò)誤，見(jiàn)下面三角函數(shù)與角度的對(duì)應(yīng)關(guān)系周期圖。
參閱
Do you really know CSS linear-gradients?
MDN linear-gradient
W3C - CSS Images Module Level 3 # linear-gradients
到此這篇關(guān)于Canvas 文本填充線性漸變的使用詳解的文章就介紹到這了,更多相關(guān)Canvas文本填充線性漸變內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
