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