java如何獲得相反的顏色_javascript – 如何根據當前顏色生成相反的顏色?

更新:

GitHub上的生產就緒代碼.

我就是這樣做的:

>將HEX轉換為RGB

>反轉R,G和B組件

>將每個組件轉換回HEX

>用零和輸出填充每個組件.

function invertColor(hex) {

if (hex.indexOf('#') === 0) {

hex = hex.slice(1);

}

// convert 3-digit hex to 6-digits.

if (hex.length === 3) {

hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];

}

if (hex.length !== 6) {

throw new Error('Invalid HEX color.');

}

// invert color components

var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),

g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),

b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);

// pad each with zeros and return

return '#' + padZero(r) + padZero(g) + padZero(b);

}

function padZero(str, len) {

len = len || 2;

var zeros = new Array(len).join('0');

return (zeros + str).slice(-len);

}

示例輸出:

f0070ae3ccbd40514029fa8307b1298c.png

高級版:

這有一個bw選項,決定是否反轉為黑色或白色;所以你會得到更多的對比度,這對人眼來說通常更好.

function invertColor(hex, bw) {

if (hex.indexOf('#') === 0) {

hex = hex.slice(1);

}

// convert 3-digit hex to 6-digits.

if (hex.length === 3) {

hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];

}

if (hex.length !== 6) {

throw new Error('Invalid HEX color.');

}

var r = parseInt(hex.slice(0, 2), 16),

g = parseInt(hex.slice(2, 4), 16),

b = parseInt(hex.slice(4, 6), 16);

if (bw) {

// http://stackoverflow.com/a/3943023/112731

return (r * 0.299 + g * 0.587 + b * 0.114) > 186

? '#000000'

: '#FFFFFF';

}

// invert color components

r = (255 - r).toString(16);

g = (255 - g).toString(16);

b = (255 - b).toString(16);

// pad each with zeros and return

return "#" + padZero(r) + padZero(g) + padZero(b);

}

示例輸出:

ca76b604df0d01cc6cc6d815b08be37e.png

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/443059.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/443059.shtml
英文地址,請注明出處:http://en.pswp.cn/news/443059.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

php暫停循環,在特定數量的遞歸循環后,PHP停止執行

我遇到的問題很奇怪。 在執行遞歸循環時會發生這種情況。 使用for循環或任何其他迭代執行相同任務時,不會發生這種情況。在?21 000次以下遞歸調用函數時,一切正常。 超過此數字時會出現問題。我的工作代碼:foo();function foo($i 1) {if ($…

thinkphp3 php jwt,thinkphp框架使用JWTtoken的方法詳解

本文實例講述了thinkphp框架使用JWTtoken的方法。分享給大家供大家參考,具體如下:簡介一:JWT介紹:全稱JSON Web Token,基于JSON的開放標準((RFC 7519) ,以token的方式代替傳統的Cookie-Session模式&#xf…

php 64位編碼解碼,php base64 編碼和解碼

/*** 自定義規則方式編碼和解碼**/public function test_changinttoStr () {$intvalue1 1232344234;$intStr ;$str "Y 9 L F k g y 5 R o v i x I 1 a O f 8 U h d s 3 r 4 D M p l Q Z J X P q e b E 0 W S j B n 7 w V z m N 2 G c 6 T H C A K u t";$seq expl…

matlab能力處理,書+程序《MATLAB圖像處理:能力提高與應用案例》趙小川

【實例簡介】MATLAB圖像處理能力提高與應用案例 [趙小川 編著] 2014年版,書程序(僅供學習)【實例截圖】【核心代碼】c3c59b5e-16c1-4bda-938e-8fcfb2ff870d└── 《MATLAB圖像處理:能力提高與應用案例》書程序├── 1.1 圖像多分辨率金字塔.zip├── 1.2圖像的矩…

wamp php啟動不成功,wamp的mysql 啟動失敗解決

wamp啟動失敗,查看原因是mysql 啟動失敗首先查看mysql的啟動日志命令:mysqld --console知道error報錯的地方:然后百度了此報錯,解決方法在my.ini中添加innodb_force_recovery 1發現這個會影響insert需要設置為 innodb_force_reco…

php復選框樣式,如何自定義checkbox樣式?附代碼

本篇文章給大家帶來的內容是關于如何自定義checkbox樣式?附代碼,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。修改原生checkbox樣式。效果原理1.利用CSS3屬性 appearance。該屬性(強制)更改(改變)默認(原生)樣式…

JAVA用數據留給出師表排序,如果諸葛亮會編程,用Java寫出師表...

繼上一篇 "如果諸葛亮用C#寫出師表..."后,站長想自己的第一語言是Java,雖然平時工作上用的不多,也用Java實現一遍吧,改改就是了,無非就是:C#的Console.WriteLine改為Java的System.out.println;C#…

python 橫坐標旋轉,python 橫坐標旋轉

數據旋轉公式x1cos(angle)*x-sin(angle)*y;y1cos(angle)*ysin(angle)*x;從數學上來說,此公式可以用來計算某個點繞另外一點旋轉一定角度后的坐標,例如:A(x,y)繞B(a,b)旋轉β度后的位置為C(c,d),…

php 數組區刪除重復的,php – 從數組中刪除重復的項目

我使用下面的代碼行來遍歷數據庫中的一個表:$items_thread $connection -> fetch_all($sql);如果我打印出來的陣列:print_r($items_thread);我會得到這個:Array([0] > Array([RecipientID] > 3[RecipientScreenname] > Tom L[Re…

python計算器教程,用Python程序制作一個簡單的計算器

用Python程序制作一個簡單的計算器在此示例中,您將學習創建一個簡單的計算器,該計算器可以根據用戶的輸入進行加,減,乘或除。要理解此示例,您應該了解以下Python編程主題:通過函數創建簡單計算器示例# 程序…

oracle表重命名 索引,CSS_在Oracle數據庫中按用戶名重建索引的方法,如果你管理的Oracle數據庫下某 - phpStudy...

在Oracle數據庫中按用戶名重建索引的方法如果你管理的Oracle數據庫下某些應用項目有大量的修改刪除操作, 數據索引是需要周期性的重建的.它不僅可以提高查詢性能, 還能增加索引表空間空閑空間大小.在ORACLE里大量刪除記錄后, 表和索引里占用的數據塊空間并沒有釋放.重建索引可以…

ora-01113 oracle8i,ora-01113解決辦法

今天在檢查接口機的時候,發現速度奇慢,于是,就差了一下v$session表,可是很不幸,查詢的速度慢的要命,原來的前幾天備份的時候出現的問題,沒辦法,關閉后重其一次吧,可是關閉…

oracle更換rac節點,Oracle-rac 更改VIP地址—2節點的

1、主機名規劃:--更改前:#Public Network - (eth0)ITPUB個人空間8Aw I"PbAv192.168.10.11 rac1G&n&uwk%m11386773192.168.10.12 rac2#Private Interconnect - (eth1)[V/{h4D(*f1L!J1138677310.10.10.11 rac1privH9RI(H/d.cP*UY1138677310.1…

Linux部署oracle11g,linux環境下部署Oracle11g

一、部署準備1、查看本地ssh服務Linux系統下安裝啟動ssh服務:1.檢查是否裝了SSH包rpm-qa |grep ssh2.沒有安裝SSH直接YUM安裝yuminstall openssh-server3.檢查SSH服務是否為開機啟動chkconfig--list sshd4.設置開機啟動SSH服務chkconfig--level 2345 sshd on5.重新啟…

php yii把pdf轉成圖片,yii實現圖片上傳及縮略圖生成的方法

這篇文章主要介紹了yii實現圖片上傳及縮略圖生成的方法,詳細分析了圖片的上傳及縮略圖的生成原理與實現方法,是非常實用的技巧,需要的朋友可以參考下本文實例講述了利用yii框架來實現圖片上傳功能并在上傳成功之后自動生成縮略圖的方法,分享給大家供大家參考。具體實…

linux下的安裝命令行工具下載,linux系統程序安裝(二)yum工具2-yum源及包下載

繼續我們的yum工具應用之旅,yum工具之所以方便就是因為有方便的在線云庫,實際工作中我們可能沒辦法鏈接互聯網,或者我們想安裝的程序原生源那么我們能不能用其他方式應用方便的yum源呢?一、使用光盤作為yum源1、將光盤掛載到/mnt目…

linux顯卡內核修改,iTOP-4412開發板-驅動-linux顯卡驅動的修改方法

本文檔介紹迅為4412開發板的顯卡分辨率修改方法。iTOP-4412 開發板支持 4.3 寸、7 寸和 9.7 寸等 lcd 顯示屏。其中 4.3 寸屏是用的 cpu直接出來的 RGB 信號,7 寸屏和 9.7 寸屏是用的 LVDS 信號,硬件上使用了一個 RGB 轉LVDS 的芯片實現的。我們來看下顯…

linux-如何限制普通用戶的磁盤使用空間-磁盤配額quota,Linux系統下如何進行磁盤配額Quota的設置...

Linux如何進行磁盤配額quota的設置通過quota進行磁盤配額,可以控制用戶對磁盤空間和文件的控制,我們以一個實例作為說明,對2個用戶user01、user02分別進行磁盤使用空間和創建文件的限制。首先,創建一個新的分區&#x…

linux一臺機器如何安裝兩個mysql,在一臺linux機器上啟動兩個mysql實例

環境:linux主機上已經yum安裝了mysql,而且數據庫正在運行。在不關閉/重啟mysql的情況下,重新啟動一個新的mysql實例,使用3307端口,實現一臺機器上同時運行兩個數據庫實例。1、創建新的mysql實例數據存儲目錄&#xff1…

linux和windows啟動,Linux和Windows雙系統的啟動

問題Linux和Windows雙系統的啟動解決方案在某些特殊情況下,服務器可能要安裝雙系統一個linux系統,一個windows系統這種情況下,安裝順序是,先裝Windows系統,后裝Linux這是因為,Linux的引導程序grub具備多系統…