そのまま表示

<html>
<meta http-equiv="content-type" charset="utf-8">
<head>
<title>Gradation</title>
</head>
<body>

From Color <input type="text" id="InputFrID" value="red" ><br>
To Color   <input type="text" id="InputToID" value="blue"><br>
<input type="button" value="実行" onclick="SampleExec()"/><br>

From Color [<span id="FrColorStrID"></span>]→[<span id="FrColorRGBID"></span>]<br>
To Color   [<span id="ToColorStrID"></span>]→[<span id="ToColorRGBID"></span>]<br>

<canvas id="Gr0CanvasID" width="50" height="50"></canvas>
<canvas id="Gr1CanvasID" width="50" height="50"></canvas>
<canvas id="Gr2CanvasID" width="50" height="50"></canvas>
<canvas id="Gr3CanvasID" width="50" height="50"></canvas>
<canvas id="Gr4CanvasID" width="50" height="50"></canvas>
<canvas id="Gr5CanvasID" width="50" height="50"></canvas>
<canvas id="Gr6CanvasID" width="50" height="50"></canvas>
<canvas id="Gr7CanvasID" width="50" height="50"></canvas>
<canvas id="Gr8CanvasID" width="50" height="50"></canvas>
<canvas id="Gr9CanvasID" width="50" height="50"></canvas>

<canvas id="Wrk_Color2RGB_CanvasID" width="1" height="1" style="display:none;"></canvas><br>

<script language="JavaScript" src="ColorControl_Cls.js"></script>

<script language="JavaScript">

// 実行サンプル
function SampleExec( ){
	
	var ColorControl = new ColorControl_Cls();
	
	// 入力された文字列取得
	var InputFrColorStr = document.getElementById("InputFrID").value;
	var InputToColorStr = document.getElementById("InputToID").value;
	
	// 入力された文字列取得
	var InputFrColorRGB = ColorControl.Color2RGB( InputFrColorStr , 'Wrk_Color2RGB_CanvasID' );
	var InputToColorRGB = ColorControl.Color2RGB( InputToColorStr , 'Wrk_Color2RGB_CanvasID' );
	
	// 元情報を表示
	document.getElementById("FrColorStrID").innerHTML = InputFrColorStr;
	document.getElementById("FrColorRGBID").innerHTML = InputFrColorRGB;
	document.getElementById("ToColorStrID").innerHTML = InputToColorStr;
	document.getElementById("ToColorRGBID").innerHTML = InputToColorRGB;
	
	// 表示
	CanvasFillBox( InputFrColorRGB , "Gr0CanvasID" );
	CanvasFillBox( GetProgressColor( InputFrColorRGB , InputToColorRGB , (1/9) ) , "Gr1CanvasID" );
	CanvasFillBox( GetProgressColor( InputFrColorRGB , InputToColorRGB , (2/9) ) , "Gr2CanvasID" );
	CanvasFillBox( GetProgressColor( InputFrColorRGB , InputToColorRGB , (3/9) ) , "Gr3CanvasID" );
	CanvasFillBox( GetProgressColor( InputFrColorRGB , InputToColorRGB , (4/9) ) , "Gr4CanvasID" );
	CanvasFillBox( GetProgressColor( InputFrColorRGB , InputToColorRGB , (5/9) ) , "Gr5CanvasID" );
	CanvasFillBox( GetProgressColor( InputFrColorRGB , InputToColorRGB , (6/9) ) , "Gr6CanvasID" );
	CanvasFillBox( GetProgressColor( InputFrColorRGB , InputToColorRGB , (7/9) ) , "Gr7CanvasID" );
	CanvasFillBox( GetProgressColor( InputFrColorRGB , InputToColorRGB , (8/9) ) , "Gr8CanvasID" );
	CanvasFillBox( InputToColorRGB , "Gr9CanvasID" );
	
}

class ColorRGB_Cls
{
	constructor( FrColor , ToColor )
	{
		this.FrColor = FrColor;
		this.FrHexR = FrColor.substring(1,3);
		this.FrHexG = FrColor.substring(3,5);
		this.FrHexB = FrColor.substring(5,7);
		this.ToColor = ToColor;
		this.ToHexR = ToColor.substring(1,3);
		this.ToHexG = ToColor.substring(3,5);
		this.ToHexB = ToColor.substring(5,7);
	}
}

function GetProgressColor( FrColor , ToColor , Percent ){
	
	var ColorRGB = new ColorRGB_Cls( FrColor , ToColor );
	
//	document.getElementById("Debug01").innerHTML = ColorRGB.FrHexR;
//	document.getElementById("Debug02").innerHTML = ColorRGB.FrHexG;
//	document.getElementById("Debug03").innerHTML = ColorRGB.FrHexB;
//	document.getElementById("Debug04").innerHTML = ColorRGB.ToHexR;
//	document.getElementById("Debug05").innerHTML = ColorRGB.ToHexG;
//	document.getElementById("Debug06").innerHTML = ColorRGB.ToHexB;
	
	var RetColor = '#' + GetHalfwayHex( ColorRGB.FrHexR , ColorRGB.ToHexR , Percent )
	                   + GetHalfwayHex( ColorRGB.FrHexG , ColorRGB.ToHexG , Percent )
	                   + GetHalfwayHex( ColorRGB.FrHexB , ColorRGB.ToHexB , Percent );
	
//	document.getElementById("Debug01").innerHTML = RetColor;
	
	return RetColor;
}

function GetHalfwayHex( SrcHex , DstHex , Percent ){
	
	var SrcInt = parseInt( SrcHex , 16 );
	var DstInt = parseInt( DstHex , 16 );
	var WayInt;
	
	if( SrcInt > DstInt ){
		WayInt = Math.round( ( SrcInt - DstInt ) * ( 1 - Percent ) + DstInt );
	} else {
		WayInt = Math.round( ( DstInt - SrcInt ) * Percent + SrcInt );
	}
	
//	document.getElementById("Debug01").innerHTML = Percent;
//	document.getElementById("Debug02").innerHTML = (('0' + WayInt.toString(16).toUpperCase()).substr(-2));
//	document.getElementById("Debug03").innerHTML = WayInt;
	
	return (('0' + WayInt.toString(16).toUpperCase()).substr(-2));
}

// // [#xxxxxx]をRGB毎に分割
// function ColorRGB2RGB( TgColor ){
// 	
// 	var ColorRGB = new ColorRGB_Cls();
// 	
// 	ColorRGB.ColorStrRGB = TgColor;
// 	
// 	ColorRGB.ColorHexR = TgColor.substring(1,3);
// 	ColorRGB.ColorHexG = TgColor.substring(3,5);
// 	ColorRGB.ColorHexB = TgColor.substring(5,7);
// 	
// 	return ColorRGB;
// }

function CanvasFillBox( ColorStr , CanvasID ){
	
	// 塗りつぶし
	var CanvasElement = document.getElementById( CanvasID );
	var CanvasContext = CanvasElement.getContext('2d');
	CanvasContext.fillStyle = ColorStr;
	CanvasContext.fillRect( 0, 0
	        , CanvasElement.getBoundingClientRect().width
	        , CanvasElement.getBoundingClientRect().height );
	
}

</script>

<span id="Debug01"></span><br>
<span id="Debug02"></span><br>
<span id="Debug03"></span><br>
<span id="Debug04"></span><br>
<span id="Debug05"></span><br>
<span id="Debug06"></span><br>


</body>
</html>
＜＜　広告　＞＞