HSLをRGBに変換する過程で、四捨五入ができたり、できなかったりします。
こちらのサンプルをご覧頂くのが早いと思います。
https://jsfiddle.net/bquej64n/
現状は57行目のscore
が30
で、四捨五入されたRGBは正常(191,128,64)です。
しかしこれを300
などにするとおかしな数字(191,64,45326)になってしまい、RGBの色がHSLの色と一致しません。
どこを直せばどんな数字でも四捨五入が正常にできるでしょうか?
以下、上記jsfiddleのコードになります。
html
1<h4>hsl</h4> 2<p id="hsl">hsl</p> 3<div class="hsl"></div> 4 5<hr> 6 7<h4>rgb</h4> 8<p id="rgb">rgb</p> 9<div class="rgb"></div>
javascript
1// 変換 2function hsl2rgb ( hsl ) { 3 var h = hsl[0] ; 4 var s = hsl[1] ; 5 var l = hsl[2] ; 6 7 var max = l + ( s * ( 1 - Math.abs( ( 2 * l ) - 1 ) ) / 2 ) ; 8 var min = l - ( s * ( 1 - Math.abs( ( 2 * l ) - 1 ) ) / 2 ) ; 9 10 var rgb ; 11 var i = parseInt( h / 60 ) ; 12 13 switch( i ) { 14 case 0 : 15 case 6 : 16 rgb = [ max, min + (max - min) * (h / 60), min ] ; 17 break ; 18 19 case 1 : 20 rgb = [ min + (max - min) * (120 - h / 60), max, min ] ; 21 break ; 22 23 case 2 : 24 rgb = [ min, max, min + (max - min) * (h - 120 / 60) ] ; 25 break ; 26 27 case 3 : 28 rgb = [ min, min + (max - min) * (240 - h / 60), max ] ; 29 break ; 30 31 case 4 : 32 rgb = [ min + (max - min) * (h - 240 / 60), min, max ] ; 33 break ; 34 35 case 5 : 36 rgb = [ max, min, min + (max - min) * (360 - h / 60) ] ; 37 break ; 38 } 39 40 // 四捨五入しなければこう 41 //return rgb.map( function ( value ) { 42 // return value * 255 ; 43 //} ) ; 44 45 // 四捨五入するためにこう 46 return rgb.map( function ( value ) { 47 var multi = value * 255 ; 48 var round = Math.round( multi ); 49 return round ; 50 } ) ; 51 52} 53 54// 1から360まで入力 55var score = '30'; 56 57// hsl 58var make_hsl = ' '+score+', 50%, 50% '; 59$('.hsl').css('background',' hsl('+make_hsl+') '); 60$('#hsl').text(make_hsl); 61 62// rgb 63var make_rgb = hsl2rgb( [ score, 0.5, 0.5 ] ) ; 64$('.rgb').css('background','rgb('+make_rgb+')'); 65$('#rgb').text(make_rgb); 66 67 68 69 70 71 72 73 74 75
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/26 23:38 編集