質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

193閲覧

JSで四捨五入ができたり、できなかったりする

jugemins

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/02/26 22:57

編集2019/02/26 23:00

HSLをRGBに変換する過程で、四捨五入ができたり、できなかったりします。

こちらのサンプルをご覧頂くのが早いと思います。
https://jsfiddle.net/bquej64n/

現状は57行目のscore30で、四捨五入された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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

min + (max - min) * (360 - h / 60) のようになっている式ですが、min + (max - min) * ((360 - h) / 60) なのではないでしょうか(他の部分も同様)。

投稿2019/02/26 23:11

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jugemins

2019/02/26 23:38 編集

助かりました。どうもありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問