| ポイント |
<![CDATA[
p = 16 / str.length;
for (i=0; i<str.length; i++)
{
pt = Math.floor(p*i);
n = "0123456789ABCDEF".charAt(pt);
c = "#"+n+n+"0000";
document.write(str.charAt(i).fontcolor(c));
}
gradText("Sample Text (^-^)/");
]]>
|
| 説 明 |
文字にグラデーションをかけるには文字色を求める必要があります。色が16段階の輝度で変化する場合は、「16/文字数」として１文字あたりの色ステップ（輝度変化量）を求めておきforで文字数分だけ繰り返し処理を行います。色は「文字位置*色ステップ」で得られた位置を元に色を表す文字列"0123456789ABCDEF"から抜き出します。抜き出した文字を連結しカラーコードを生成します。文字色はfontcolor()を使って指定します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>文字にグラデーションをかける</title>
<script Language="JavaScript"><!--
function gradText(str)
{
p = 16 / str.length;
for (i=0; i<str.length; i++)
{
pt = Math.floor(p*i);
n = "0123456789ABCDEF".charAt(pt);
c = "#"+n+n+"0000";
document.write(str.charAt(i).fontcolor(c));
}
}
// --></script>
</head>
<body bgcolor="white">
<script language="JavaScript"><!--
gradText("Sample Text (^-^)/");
document.write("<br>");
gradText("■■■■■■■■■■■■■■■■■■■■■■■■");
// --></script>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
文字にグラデーションをかける