回答編集履歴
4
N進数の説明追加
answer
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
### 桁落ちの問題
|
|
2
|
+
|
|
1
3
|
- [RGB値からHTMLカラーコードに変換する:humming bird](http://yas-hummingbird.blogspot.jp/2009/09/rgbhtml.html)
|
|
2
4
|
|
|
3
5
|
単純に考えれば赤を16ビットシフト、緑を8ビットシフトすればいいですが、それでは赤が `0` の場合に桁落ちが発生してしまいます。
|
|
@@ -12,7 +14,9 @@
|
|
|
12
14
|
console.log(toColorCode(0, 0, 128)); // "#80"
|
|
13
15
|
```
|
|
14
16
|
|
|
17
|
+
### 桁落ちの回避策
|
|
18
|
+
|
|
15
|
-
|
|
19
|
+
桁落ちを回避するために `0x000080` を `0x1000080` のように変換している(一つ上の桁に `1` を置く)のでしょう。
|
|
16
20
|
256 を加算すると9bit目に1を置く事になります。
|
|
17
21
|
10進数で例えるなら「9 + 100 = 109」で2桁目をゼロパディングしているようなものですね。
|
|
18
22
|
|
|
@@ -23,6 +27,34 @@
|
|
|
23
27
|
console.log((0x100 + r).toString(16)); // "10f"
|
|
24
28
|
```
|
|
25
29
|
|
|
30
|
+
### N進数
|
|
31
|
+
|
|
32
|
+
Nを基数とするN進数には各桁となる数字に明確な計算法があります。
|
|
33
|
+
10進数で例えるなら、`148` は次のように分解する事が出来ます。
|
|
34
|
+
|
|
35
|
+
```JavaScript
|
|
36
|
+
console.log(Math.pow(10, 0) * 8); // 8 … 1桁目は 10^0*8 (10の0乗の8倍)
|
|
37
|
+
console.log(Math.pow(10, 1) * 4); // 40 … 2桁目は 10^1*4 (10の1乗の4倍)
|
|
38
|
+
console.log(Math.pow(10, 2 * 1)); // 100 … 3桁目は 10^2*1 (10の2乗の1倍)
|
|
39
|
+
console.log(Math.pow(10, 2) * 1 + Math.pow(10, 1) * 4 + Math.pow(10, 0) * 8); // 148
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
同じ事を16進数で考えればこうなります。
|
|
43
|
+
|
|
44
|
+
```JavaScript
|
|
45
|
+
console.log((Math.pow(16, 2) * 1).toString(16)); // 100 … 3桁目は 16^2*1 (16の2乗の1倍)
|
|
46
|
+
console.log((Math.pow(16, 2) * 1)); // 256 … 10進数なら 256
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
従って、256 を加算するという事は16進数でいうところの「`0x100` (16進数表記)」を加算する事と同義です。
|
|
50
|
+
「`0x100` (16進数表記)」は2進数に換算すると「`0b100000000` (2進数表記)」になります。
|
|
51
|
+
「`0b100000000` (2進数表記)」は9bit目に1がある数字です。
|
|
52
|
+
2進数についてはご自身で計算(検証)してみてください。
|
|
53
|
+
|
|
54
|
+
- [ネットワークの勉強をはじめから - 2進数と16進数の変換方法](http://www.infraexpert.com/study/ip2.html)
|
|
55
|
+
|
|
56
|
+
### 別解コード
|
|
57
|
+
|
|
26
58
|
私なら次のようにコードを書きます。
|
|
27
59
|
|
|
28
60
|
```JavaScript
|
|
@@ -37,4 +69,10 @@
|
|
|
37
69
|
|
|
38
70
|
ゼロパディングについては文字列処理をしてもいいので他の方法もあるとは思います。
|
|
39
71
|
|
|
72
|
+
### 更新履歴
|
|
73
|
+
|
|
74
|
+
- 2016/05/02 11:24 256加算のロジックの説明追加
|
|
75
|
+
- 2016/05/02 11:59 256加算のロジックの説明が誤っていたので修正
|
|
76
|
+
- 2016/05/03 11:55 N進数の説明追加
|
|
77
|
+
|
|
40
78
|
Re: re97 さん
|
3
ゼロパディングのロジック\(説明修正\)
answer
CHANGED
|
@@ -13,8 +13,16 @@
|
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
それを回避するために `0x000080` を `0x1000080` のように変換している(一つ上の桁に `1` を置く)のでしょう。
|
|
16
|
+
256 を加算すると9bit目に1を置く事になります。
|
|
16
|
-
|
|
17
|
+
10進数で例えるなら「9 + 100 = 109」で2桁目をゼロパディングしているようなものですね。
|
|
17
18
|
|
|
19
|
+
```JavaScript
|
|
20
|
+
var r = 15;
|
|
21
|
+
console.log(r.toString(16)); // "f"
|
|
22
|
+
console.log((256 + r).toString(16)); // "10f"
|
|
23
|
+
console.log((0x100 + r).toString(16)); // "10f"
|
|
24
|
+
```
|
|
25
|
+
|
|
18
26
|
私なら次のようにコードを書きます。
|
|
19
27
|
|
|
20
28
|
```JavaScript
|
2
256加算のロジックの説明
answer
CHANGED
|
@@ -8,11 +8,13 @@
|
|
|
8
8
|
return '#' + ((r << 16) + (g << 8) + b).toString(16);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
console.log(toColorCode(255, 255, 255)); // "
|
|
11
|
+
console.log(toColorCode(255, 255, 255)); // "ffffff"
|
|
12
12
|
console.log(toColorCode(0, 0, 128)); // "#80"
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
それを回避するために `0x000080` を `0x1000080` のように変換している(一つ上の桁に `1` を置く)のでしょう。
|
|
16
|
+
255 を加算する事で8bitシフトしますが、桁を繰り上げた場所に1があって欲しいので 255 + 1 で 256 を加算しています。その後、8bitシフトする事で16bitシフトしているわけです。
|
|
17
|
+
|
|
16
18
|
私なら次のようにコードを書きます。
|
|
17
19
|
|
|
18
20
|
```JavaScript
|
|
@@ -21,7 +23,7 @@
|
|
|
21
23
|
return '#' + (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
22
24
|
}
|
|
23
25
|
|
|
24
|
-
console.log(toColorCode(255, 255, 255)); // "
|
|
26
|
+
console.log(toColorCode(255, 255, 255)); // "ffffff"
|
|
25
27
|
console.log(toColorCode(0, 0, 128)); // "#000080"
|
|
26
28
|
```
|
|
27
29
|
|
1
ffffff -> #ffffff
answer
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
return '#' + ((r << 16) + (g << 8) + b).toString(16);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
console.log(toColorCode(255, 255, 255)); // "ffffff"
|
|
11
|
+
console.log(toColorCode(255, 255, 255)); // "#ffffff"
|
|
12
12
|
console.log(toColorCode(0, 0, 128)); // "#80"
|
|
13
13
|
```
|
|
14
14
|
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
return '#' + (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
console.log(toColorCode(255, 255, 255)); // "ffffff"
|
|
24
|
+
console.log(toColorCode(255, 255, 255)); // "#ffffff"
|
|
25
25
|
console.log(toColorCode(0, 0, 128)); // "#000080"
|
|
26
26
|
```
|
|
27
27
|
|