何か助けはありますか?私はJavascriptが初めてです。これは私がオンラインで見た興味深い質問であり、考えられる解決策に興味があります。
ありがとう!
何か助けはありますか?私はJavascriptが初めてです。これは私がオンラインで見た興味深い質問であり、考えられる解決策に興味があります。
ありがとう!
黒は 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 であるため、背景画像などを使用することはできません。
使用例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 です)