中間色の求め方
2つの色の中間色を求める方法の説明です。
サンプル
解説
赤の度合いが乱数で決まる色aと色bがあった場合、色aと色bの色の段階を10段階に分割し、そのうち色a寄りの3段階目の色を色iとして求める方法です。
公式は座標の補間と同様です。
ソースコード
<html><head><!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--><script type="text/javascript">
var elmCv;var ctxCv;function sbInit() {//キャンバスの準備elmCv = document.getElementById('cv');ctxCv = elmCv.getContext('2d');//sbAnimeを1秒おきに呼び出しsetInterval('sbAnime()',1000)}function sbAnime() {//キャンバスをクリアctxCv.clearRect(0,0,400,200);//色aと色bのRGBそれぞれの色は乱数で求めるvar iRa = Math.random() * 256;var iRb = Math.random() * 256;//色aと色bの30%の割合にある色iは計算で求めるvar iRi;iRi = iRa + (iRb - iRa) / 10 * 3;//色を表示ctxCv.fillStyle = 'rgb(255,' + iRa + ',255)';ctxCv.fillRect(50,50,100,100);ctxCv.fillStyle = 'rgb(255,' + iRi + ',255)';ctxCv.fillRect(150,50,100,100);ctxCv.fillStyle = 'rgb(255,' + iRb + ',255)';ctxCv.fillRect(250,50,100,100);}window.onload = sbInit;
</script></head><body><canvas id="cv" width="400" height="200"></canvas></body></html>