javascript_javascript スキルでカラー グラデーションを実装する方法

グラデーションは美学における重要な形式的な美しさのルールであり、それに相当するものは突然変異です。形状、サイズ、位置、方向、色、その他の視覚的要素をグラデーションにすることができます。色、色合い、明るさ、純度によってもグラデーション効果を生み出し、豊かな美しさを表現できます。この記事では主に2色のRGB値のグラデーションアルゴリズムについて説明します。

既知: A=50、B=200、A と B を 3 つの部分に均等に分割し (Step=3)、各部分の値を求めます (StepN)。

式: 勾配 = A (B-A) / ステップ * N

注] プログラミング時に効率を高め、浮動小数点演算を避けるために、除算は最後に配置されることが多いため、式は次のようになります: Gradient = A (B-A) * N / Step

Step=3の場合、式よりStep1=A(A-B)/3*1=50(200-50)/3=100、Step2=A(A-B)/3*2=50(200- 50)/3*2=150。これは、一様勾配のアルゴリズム原理です。非常に簡単で、小学生の知識です。

2 つの色のグラデーションは、それぞれ RGB(200,50,0) と RGB(50,200,0) として計算されます。

RStep1=RA=RA (BA-RA)/ステップ*N=200 (50-200)/3*1=200-50=150

GStep1=GA=GA (GA-GA)/ステップ*N=50 (200-50)/3*1=50 50=100

BStep1=BA=BA (BA-BA)/ステップ*N=0

RGBStep1=(150,100,0) であるため、同じ方法を使用して RGBStep2=(100,150,0) を見つけることができます。

これは、Web ページのグラデーション テキスト効果が作成される方法です。たとえば、Web ページの HTML に次のようなコードがあります: You are the most beautiful Rainbow in my sky グラデーション テキストを実現するには、最後に次のコードを追加します。 (グラデーションを生成する 2 つの色: #c597ff と #73e7a9)

コードをコピー コードは次のとおりです。

var ColorA = "#c597ff";
var ColorB = "#73e7a9";

// カラー #FF00FF 形式を Array(255,0,255) に変換します
function color2rgb(color)
{
var r = parseInt(color.substr(1, 2), 16);
var g = parseInt(color.substr(3, 2), 16);
var b = parseInt(color.substr(5, 2), 16);
return new Array(r, g, b);
}

//カラー配列(255,0,255) 形式は #FF00FF に変換されます
function rgb2color(rgb)
{
var s = "#";
for (var i = 0) ; i {
var c = Math.round(rgb[i]).toString(16);
if (c.length == 1)
'0 ' c;
s = c;
}
return s.toUpperCase();
}

//勾配を生成します
function gradient()
{
var str = myText.innerText;
var result = "";
var Step = str.length - 1;

var Gradient = new Array(3);
var A = color2rgb(ColorA);
var B = color2rgb(ColorB);

for (var N = 0; N {
for (var c = 0; c {
Gradient[c] = A[c] (B[c]-A[c]) / Step * N;
}
result = "" str.charAt(N) "";
}
myText.innerHTML = result;
}

gradient(); // プログラムを実行します

3 色以上の A、B、C のグラデーションの場合、理論的には、最初に A と B をグラデーションにし、次に B と C をグラデーションにするだけで済みます。実際には、グラディエントの各ピクセルの色分布を均一にするために、さまざまな補間アルゴリズムが作成されています。具体的なアルゴリズムについては後述します。