這篇文章將為大家詳細(xì)講解有關(guān)使用Canvas文本填充線性漸變的案例，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、蘿北網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為蘿北等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

前言

在 Canvas 中對(duì)文本填充水平或垂直的線性漸變可以輕易實(shí)現(xiàn)，而帶角度的漸變就復(fù)雜很多；就好像下面這樣，假設(shè)文本矩形寬為W, 高為H, 左上角坐標(biāo)為X, Y。

猜想與答案

給出兩個(gè)答案：

正確答案是圖二，因?yàn)檫@樣得出來的坐標(biāo)生成的漸變最緊接文本矩形邊界，它的運(yùn)動(dòng)軌跡如下動(dòng)圖：

(圖來源：Do you really know CSS linear-gradients）

漸變起點(diǎn)與終點(diǎn)坐標(biāo)的計(jì)算

所以，漸變的起點(diǎn)與終點(diǎn)坐標(biāo)該怎么計(jì)算呢？答:

1. 先求得起點(diǎn)與終點(diǎn)的長度（距離）。

2. 根據(jù)長度與文本矩形的中心點(diǎn)坐標(biāo)分別計(jì)算出起點(diǎn)與終點(diǎn)坐標(biāo)。

線性漸變長度的計(jì)算 W3C 給出了一個(gè)公式（A 表示角度）：

gradientLineLength = abs(W * sin(A)) + abs(H * cos(A))

不過，該公式主要應(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))

// 半長：
halfGradientLineLength = (abs(W * cos(A)) + abs(H * sin(A))) / 2

那么這個(gè)公式是怎么來的呢？以下是筆者的求解：

由圖可得以下方程組：

因此可推導(dǎo)出：

化簡后為：

所以c1 + c2 為：

由三角函數(shù)平方公式知：cos(A) * cos(A) = 1 - sin(A) * sin(A)， 代入c1 + c2：

第一步化簡后：

最后的結(jié)果就是：

因?yàn)?code>sin, cos 在函數(shù)周期內(nèi)存在負(fù)值（見下面角度對(duì)應(yīng)的三角函數(shù)周期圖），所以線性漸變的長度需要取絕對(duì)值。

至此，我們知道了線性漸變長度，文本矩形的中心點(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)?code>tan 在其周期內(nèi)存在無窮值，需要做特定的條件判斷，而sin, cos 沒有此類問題，代碼書寫更為簡潔清晰并且不會(huì)因疏忽產(chǎn)生錯(cuò)誤，見下面三角函數(shù)與角度的對(duì)應(yīng)關(guān)系周期圖。

關(guān)于“使用Canvas文本填充線性漸變的案例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

文章標(biāo)題：使用Canvas文本填充線性漸變的案例-創(chuàng)新互聯(lián)
文章URL：http://chinadenli.net/article28/dosdcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、虛擬主機(jī)、外貿(mào)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)