導航:首頁 > 編程語言 > rgb模糊濾鏡js演算法

rgb模糊濾鏡js演算法

 發布時間：2023-02-05 21:58:58

① js 怎麼實現argb和rgb的相互轉換

argb比rgb多了前2位透明度
argb:#1e000000
rgb:#000000
用js 字元串截取去掉#後2位，就等於得到了rgb的值

② rgb在js中什麼意思

rgb在js中意思是三原色色彩模式。根據查詢相關公開信息顯示：RGB色彩模式是工業界的一種顏色標准，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB即是代表紅、綠、藍三個通道的顏色，這個標准幾乎包括了人類視力所能感知的所有顏色，是運用最廣的顏色系統之一。

③ 求js顏色轉換演算法

(function(d){function h(a,b,e){var c="rgb"+(d.support.rgba?"a":"")+"("+parseInt(a[0]+e*(b[0]-a[0]),10)+","+parseInt(a[1]+e*(b[1]-a[1]),10)+","+parseInt(a[2]+e*(b[2]-a[2]),10);d.support.rgba&&(c+=","+(a&&b?parseFloat(a[3]+e*(b[3]-a[3])):1));return c+")"}function f(a){var b;return(b=/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(a))?[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16),1]:(b=/#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(a))?[17*parseInt(b[1],16),17*parseInt(b[2],
16),17*parseInt(b[3],16),1]:(b=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(a))?[parseInt(b[1]),parseInt(b[2]),parseInt(b[3]),1]:(b=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(a))?[parseInt(b[1],10),parseInt(b[2],10),parseInt(b[3],10),parseFloat(b[4])]:l[a]}d.extend(!0,d,{support:{rgba:function(){var a=d("script:first"),b=a.css("color"),e=!1;if(/^rgba/.test(b))e=!0;else try{e=b!=a.css("color","rgba(0, 0, 0, 0.5)").css("color"),
a.css("color",b)}catch(c){}return e}()}});var k="color backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor outlineColor".split(" ");d.each(k,function(a,b){d.Tween.propHooks[b]={get:function(a){return d(a.elem).css(b)},set:function(a){var c=a.elem.style,g=f(d(a.elem).css(b)),m=f(a.end);a.run=function(a){c[b]=h(g,m,a)}}}});d.Tween.propHooks.borderColor={set:function(a){var b=a.elem.style,e=[],c=k.slice(2,6);d.each(c,function(b,c){e[c]=f(d(a.elem).css(c))});var g=f(a.end);
a.run=function(a){d.each(c,function(d,c){b[c]=h(e[c],g,a)})}}};var l={aqua:[0,255,255,1],azure:[240,255,255,1],beige:[245,245,220,1],black:[0,0,0,1],blue:[0,0,255,1],brown:[165,42,42,1],cyan:[0,255,255,1],darkblue:[0,0,139,1],darkcyan:[0,139,139,1],darkgrey:[169,169,169,1],darkgreen:[0,100,0,1],darkkhaki:[189,183,107,1],darkmagenta:[139,0,139,1],darkolivegreen:[85,107,47,1],darkorange:[255,140,0,1],darkorchid:[153,50,204,1],darkred:[139,0,0,1],darksalmon:[233,150,122,1],darkviolet:[148,0,211,1],fuchsia:[255,
0,255,1],gold:[255,215,0,1],green:[0,128,0,1],indigo:[75,0,130,1],khaki:[240,230,140,1],lightblue:[173,216,230,1],lightcyan:[224,255,255,1],lightgreen:[144,238,144,1],lightgrey:[211,211,211,1],lightpink:[255,182,193,1],lightyellow:[255,255,224,1],lime:[0,255,0,1],magenta:[255,0,255,1],maroon:[128,0,0,1],navy:[0,0,128,1],olive:[128,128,0,1],orange:[255,165,0,1],pink:[255,192,203,1],purple:[128,0,128,1],violet:[128,0,128,1],red:[255,0,0,1],silver:[192,192,192,1],white:[255,255,255,1],yellow:[255,255,
0,1],transparent:[255,255,255,0]}})(jQuery);

④ 使用JS,如果通過一個RGB顏色來獲取這個顏色的所有顏色（亮度,灰度變化），如圖。

問題比較復雜，分步來講：

  1. 因為你這張圖，很顯然是使用HSB顏色，固定H，S和B的取值范專圍都是屬0%~100%，所有可能的集合就是你的這張圖，所以，首先要把rgb顏色轉換成hsb顏色。

  2. 把得到的hsb顏色的h值固定，然後使用一個循環，把hsb(h,0%,0%)~hsb(h,100%,100%)都寫入一個數組里,這里要注意hsb(h,12%,80%)和hsb(h,80%,12%)是不同的.

  3. 再把hsb顏色轉換成rgb顏色，然後輸出。

好了，思路有了，接下來難點在於rgb與hsb的顏色轉換。

二者的轉換復雜程度非同一般，所以，如果真的需要，HI我，給你一篇文章地址。這里打不出網址來。

⑤ 求js中顏色值變淺的演算法，類似於下圖

首先你的了解顏色的概念

下面我簡單介紹下顏色概念在32位系統上我們所看到的顏色由RGB三原色顯示再加上一個透明度通道就形成了多種多樣的顏色

多的我就不多說了下面直接寫一份演示代碼

<!DOCTYPEhtml>
<html>
<head>
	<title>test</title>
	<style>
		.tsetDiv{
			width:40px;
			height:40px;
			border-radius:100%;
			font-size:0;
			display:inline-block;
			margin-left:10px;
			vertical-align:middle;
		}
		#boxF{
			width:300px;
			font-size:0;
			height:auto;
		}
	</style>
</head>
<body>
<divid="boxF"></div>
<scripttype="text/javascript">
varboxf=document.getElementById("boxF");
vardivC=null;
varr=0;
varg=0;
varb=0;
	for(vari=0;i<10;i++){
		for(varj=0;j<10;j++){
			divC=document.createElement("div");
			divC.style.backgroundColor="rgb("+r+","+g+","+b+")";
		
			divC.setAttribute("class","tsetDiv");
			boxf.appendChild(divC);
		}
		//修改rgb加的不同值可以得到不同的效果rgb最大值為255所以不用擔心超過不顯示
			r+=15;
			g+=25;
			b+=35;
	}
</script>
</body>
</html>

運行效果為下圖

閱讀全文

與rgb模糊濾鏡js演算法相關的資料

熱點內容
c語言12位的數據應該怎麼存儲 瀏覽：953
將ape導入iphone 瀏覽：107
js組合快捷鍵 瀏覽：174
linux系統盤默認掛在的文件夾 瀏覽：667
淘寶數據包如何操作上架 瀏覽：567
vb編程中輸入cls是什麼意思 瀏覽：81
linuxtime服務 瀏覽：184
瘋狂安卓講義第二版代碼 瀏覽：420
老炮兒三小時版本下載 瀏覽：313
matlab怎麼調試程序 瀏覽：2
winxp升級win7的危害 瀏覽：496
網路沒連上卻不可用是怎麼回事 瀏覽：752
社區版本 瀏覽：738
怎麼查微信公眾號什麼時候開通的 瀏覽：717
安裝三菱編程閃退怎麼回事 瀏覽：488
手機怎麼創建word文件格式 瀏覽：694
c語言連接資料庫 瀏覽：887
數據線粉色和白色哪個是正 瀏覽：775
vb編程應注意什麼 瀏覽：855
js循環添加控制項 瀏覽：615

友情鏈接