javascript - 黒から白へのグラデーションを Javascript (css なし) のみで作成するにはどうすればよいでしょうか?

Question

何か助けはありますか？私はJavascriptが初めてです。これは私がオンラインで見た興味深い質問であり、考えられる解決策に興味があります。

ありがとう！

Answer 1

黒は 16 進数値 #000000、白は値 #FFFFFF です。簡単にするために、これを 10 進数で RGB (0,0,0) および RGB (255,255,255) として表すことができます。

次に、RG と B の間で同じ量を使用してグレー スケール カラーの範囲を作成しながら、カラー値を変化させる多数のアプローチを使用できます。

キャンバス上でこれを行うことも、各ピクセルの div を使用して行うこともできます。または、CSS がオプションでない場合は画像を使用することもできます。ピクセルごとに div を使用することはオプションですが、私の意見では、あまり良い方法ではありません。

擬似コード:

for i = 0 to 255 {
    create div 1/255th of the height of the container and set its background colour to RGB(i,i,i)
}

これに関する問題は、DIV のスタイリングは CSS なしでは実行できないため、引き続き CSS を使用する必要があることです。

CSS を完全に使用せずにこれを行う唯一の方法は、画像を使用することです。画像を使用して動的にグラデーションを作成したい場合は、グレースケール カラーごとに画像を用意し、これらを img タグで使用することもできます。これも CSS であるため、背景画像などを使用することはできません。

Answer 2

使用例canvas:

var
  canvas = document.getElementById('gradient'),
  context = canvas.getContext('2d'),
  gradient = context.createLinearGradient(0, 0, 0, canvas.height);

gradient.addColorStop(0, '#ffffff');
gradient.addColorStop(1, '#000000');  

context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);

(デモ)

または、要素で DOM を埋める: http://jsfiddle.net/UYxs7/1 (技術的にはこれは CSS です)