キャンバステキストフィルリニアグラデーション使用詳細説明

プリアンブル

Canvas のテキストを水平または垂直の線形グラデーションで塗りつぶすのは簡単ですが、角度のあるグラデーションははるかに複雑です。 W .

推測と答え

答えは2つあります。

正解は図2です。なぜなら、結果として得られる座標は、テキスト矩形の境界線に最も近いグラデーションを生成し、次のように移動するからです。

画像

(図版出典：CSS線形階調を本当にご存知ですか？）

グラデーションの開始と終了の座標の計算

では、グラデーションの始点と終点の座標はどのように算出するのでしょうか。答えは

1. まず、始点と終点の長さ(距離)を求めます。
2. 長さとテキスト矩形の中心点の座標から、始点と終点の座標をそれぞれ算出する。

直線勾配の長さの計算 W3Cでは計算式（角度はA）が示されています。

H

ただし、この計算式は主にCSSの線形グラデーションの設定に適用され、12時方向を0°として時計回りに回転するものである。

3時方向0°の反時計回りの回転が必要です。つまり、式は次のようになります。

X, Y

では、この数式はどこから来ているのでしょうか？以下は筆者の解答である。

グラフから次のような連立方程式が求まる。

したがって、次のように推論することができる。

に縮小されました。

だから gradientLineLength = abs(W * sin(A)) + abs(H * cos(A)) です。

三角形の二乗の公式から、次のことがわかる。 gradientLineLength = abs(W * cos(A)) + abs(H * sin(A)) // Half length. halfGradientLineLength = (abs(W * cos(A)) + abs(H * sin(A))) / 2 を代入すると

c1 + c2

{{コード

cos(A) * cos(A) = 1 - sin(A) * sin(A)

{{コード

c1 + c2

{{コード After the first simplification step. The end result is. because sin, cos has negative values within the period of the function (see the graph of the trigonometric period corresponding to the angle below), the length of the linear asymptote needs to take absolute values. At this point, we know the linear asymptote length, and the coordinates of the center point of the text rectangle are well calculated, i.e. centerX = X + W / 2 centerY = Y + H / 2 So, the coordinates of the starting point and the ending point are respectively startX = centerX - cos(A) * halfGradientLineLength startY = centerY + sin(A) * halfGradientLineLength endX = centerX + cos(A) * halfGradientLineLength endY = centerY - sin(A) * halfGradientLineLength Look at the final result Experience notes When performing trigonometric calculations, you should try to avoid starting with tan , because tan has infinite values within its period, a specific conditional judgment is required, and sin, cos There is no such problem, the code is more concise and clear and does not inadvertently generate errors, see the following diagram of trigonometric functions and angles corresponding to the period. see Do you really know CSS linear-gradients? MDN linear-gradient W3C - CSS Images Module Level 3 # linear-gradients This article on Canvas text fill linear gradients is all about this. For more information about Canvas text fill linear gradients, please search the previous articles or continue to browse the following related articles.

{{コード

{{コード
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

tan

{{コード エクスペリエンスノート

{{コード sin, cos {{コード {{コード

centerX = X + W / 2 centerY = Y + H / 2

{{コード 見る

{{コード CSSのlinear-gradientsを本当に知っていますか？

So, the coordinates of the starting point and the ending point are respectively
startX = centerX - cos(A) * halfGradientLineLength
startY = centerY + sin(A) * halfGradientLineLength

endX = centerX + cos(A) * halfGradientLineLength
endY = centerY - sin(A) * halfGradientLineLength

Look at the final result