App下載

在html5中使用Canvas完成文本填充線性漸變的使用和方法解析!

知名氣人小說寫手 2021-08-16 10:25:44 瀏覽數(shù) (2226)
反饋

在之前我們對html5canvas這個屬性講解了很多有關(guān)于這方么的實(shí)現(xiàn)方法,那么今天我們來講講有關(guān)于:“在html5中使用Canvas完成文本填充線性漸變的使用和方法解析!”這方面的相關(guān)內(nèi)容!

前言

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

猜想與答案

給出兩個答案:

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

(圖來源:Do you really know CSS linear-gradients)

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

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

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

線性漸變長度的計算 W3C 給出了一個公式(A 表示角度):

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

不過,該公式主要應(yīng)用于 CSS 的線性漸變設(shè)置,即以 12 點(diǎn)鐘方向?yàn)?0°,順時針旋轉(zhuǎn)。

而我們需要的是以 3 點(diǎn)鐘方向?yàn)?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é)果就是:

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

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

參閱

Do you really know CSS linear-gradients?

MDN linear-gradient

W3C - CSS Images Module Level 3 # linear-gradients

那么我們今天有關(guān)于:“在html5中使用Canvas完成文本填充線性漸變的使用和方法解析!”這個方面的內(nèi)容就到此了,更多有關(guān)于html5canva這方面的使用我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解!


0 人點(diǎn)贊