快捷導(dǎo)航

javascript線性漸變一

更新時(shí)間：2009年10月14日 19:59:13 作者：

javascript在處理圖像的能力其實(shí)是不弱的，可惜瀏覽器大戰(zhàn)連累了它，這還不算，Adobe 收購Macromedia更讓SVG處于怠工狀態(tài)。

作為新力軍，蘋果為我們帶來了canvas標(biāo)簽。canvas首次在Mac OS X中的Dashboard中被引入，之后又被蘋果公司的Safari瀏覽器所支持，緊接著就成為HTML5的標(biāo)準(zhǔn)，被IE內(nèi)核以外的標(biāo)準(zhǔn)瀏覽器所支持。蘋果做的好事還不止這一樁，它認(rèn)為SVG太笨重了，于是它把SVG里的濾鏡標(biāo)簽統(tǒng)統(tǒng)CSS屬性化（SVG的濾鏡比IE濾鏡還多呢，而且功能更全面）。firefox一看不對(duì)勁，連忙自己也搞一套私有屬性，只不過是前綴由-webkit-改為-moz-罷了。opera的反應(yīng)比較呆滯，應(yīng)該說私底下非常不滿，因?yàn)閛pera的CTO就是CSS的發(fā)明者Hakon Wium Lie，不喜歡別人對(duì)自己的東西啥搞。因此我實(shí)現(xiàn)線性漸變就困難重重了，IE需要用IE濾鏡，firefox在動(dòng)態(tài)創(chuàng)建SVG存在一些問題，需要用其-moz-前綴的CSS私有屬性，safari與chrome需要用-webkit-前綴的CSS私有屬性，opera需要用SVG?，F(xiàn)在一個(gè)個(gè)突破吧。

IE要用到DXImageTransform.Microsoft.Gradient濾鏡（最后那個(gè)Gradient的首字母大寫小寫無所謂）。

屬性	說明
enabled	是否啟用濾鏡，默認(rèn)為true
gradientType	是垂直漸變還是水平漸變，默認(rèn)是0(垂直漸變)，1為水平漸變
startColorStr	起始顏色，能接受一個(gè)8位hex顏色值，從#FF000000到#FFFFFFFF，默認(rèn)是藍(lán)色#FF0000F；或者使用red,green等顏色值F
endColorStr	結(jié)束顏色，能接受一個(gè)8位hex顏色值，從#FF000000到#FFFFFFFF，默認(rèn)是黑色#FF000000
startColor	作用同startColorStr，接受一個(gè)0到4294967295整體顏色值，沒有默認(rèn)值
endColor	作用同endColorStr，接受一個(gè)0到4294967295整體顏色值，沒有默認(rèn)值

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

接著講述一下SVG線性漸變的實(shí)現(xiàn)，因?yàn)橄嚓P(guān)的CSS私有屬性都衍生于此。由于沒有什么空間支持上傳SVG，我只能動(dòng)態(tài)生成SVG了。對(duì)我來說，能動(dòng)態(tài)實(shí)現(xiàn)最好不過了，起碼能減少請(qǐng)求數(shù)，少寫許多大于號(hào)小于號(hào)……下面是靜態(tài)實(shí)現(xiàn)，至于怎樣加入html自己google吧。

linearGradient 有x1,x2,y1,y2等幾個(gè)屬性，可以幫助我們實(shí)現(xiàn)水平漸變或垂直漸變。我們大可以把x1,x2,y2,y2當(dāng)成顏色漸變體的兩個(gè)點(diǎn)的坐標(biāo)就是。

當(dāng)y1等于y2，x1不等于x2，實(shí)現(xiàn)水平漸變。
當(dāng)x1等于x2，y1不等于y2，實(shí)現(xiàn)垂直漸變。
當(dāng)y1不等于y2，x1不等于x2，實(shí)現(xiàn)角度漸變。

復(fù)制代碼代碼如下:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="800px" height="400px" version="1.1" 
xmlns="http://www.w3.org/2000/svg"> 
<desc>javascript線性漸變（水平） by 司徒正美</desc> 
<defs> 
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> 
<stop offset="20%" stop-color="rgb(255,255,0)" stop-opacity="1"/> 
<stop offset="80%" stop-color="rgb(255,0,0)" stop-opacity="1"/> 
</linearGradient> 
</defs> 
<ellipse cx="200" cy="190" rx="85" ry="55" fill="url(#gradient)"/> 
</svg>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

動(dòng)態(tài)實(shí)現(xiàn)，不過在火狐中啞火了，可見火狐在SVG上也怠工了。

復(fù)制代碼代碼如下:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="800px" height="400px" version="1.1" 
xmlns="http://www.w3.org/2000/svg"> 
<desc>javascript線性漸變（垂直） by 司徒正美</desc> 
<defs> 
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> 
<stop offset="0%" stop-color="#008000" stop-opacity="1"/> 
<stop offset="80%" stop-color="#a9ea00" stop-opacity="0"/> 
</linearGradient> 
</defs> 
<polygon id = "s1" points = "60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60" fill="url(#gradient)"/> 
</svg>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

復(fù)制代碼代碼如下:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="800px" height="400px" 
xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<desc>javascript線性漸變(角度) by 司徒正美</desc> 
<defs> 
<linearGradient id="content" x1="0%" y1="0%" x2="100%" y2="100%"> 
<stop stop-color="black" offset="0%"/> 
<stop stop-color="teal" offset="50%"/> 
<stop stop-color="white" offset="100%"/> 
</linearGradient> 
</defs> 
<rect x="10px" y="10px" width="350" height="350" fill="url(#content)"/> 
</svg>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

接著說說-moz-linear-gradient，火狐的CSS私有屬性，隸屬于background-image，不過它也略寫成background。語法為：
-moz-linear-gradient( <POINT>, <POINT> [, <STOP>]* )
我們可以設(shè)置這兩個(gè)點(diǎn)的值坪決定其是水平還是垂直，如
/*水平*/
-moz-linear-gradient(left, right [, <STOP>]* )1.
/*垂直*/
-moz-linear-gradient(top, bottom [, <STOP>]* )
至于后面的部分，看看下面的運(yùn)行框就足夠了。不過這要用最新版的firefox(3.6a1)才能見效果。

<!doctype html> <title>javascript線性漸變 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript線性漸變 by 司徒正美" /> <meta name="description" content="javascript線性漸變 by 司徒正美" /> <base href="http://www.dbjr.com.cn"> <style type="text/css"> .vertical { background-image: -moz-linear-gradient(top, bottom, from(red),/*起始顏色*/ color-stop(16%, orange),/*到高的16%的位置時(shí)漸變?yōu)槌壬?/ color-stop(32%, yellow),/*到高的32%的位置時(shí)漸變?yōu)辄S色*/ color-stop(48%, green),/*到高的48%的位置時(shí)漸變?yōu)榫G色*/ color-stop(64%, blue),/*到高的64%的位置時(shí)漸變?yōu)樗{(lán)色*/ color-stop(80%, indigo),/*到高的80%的位置時(shí)漸變?yōu)樽纤{(lán)色*/ to(violet));/*結(jié)束顏色*/ height:100px; } .horizontal { background-image: -moz-linear-gradient(left, right, from(red),/*起始顏色*/ color-stop(16%, orange),/*到高的16%的位置時(shí)漸變?yōu)槌壬?/ color-stop(32%, yellow),/*到高的32%的位置時(shí)漸變?yōu)辄S色*/ color-stop(48%, green),/*到高的48%的位置時(shí)漸變?yōu)榫G色*/ color-stop(64%, blue),/*到高的64%的位置時(shí)漸變?yōu)樗{(lán)色*/ color-stop(80%, indigo),/*到高的80%的位置時(shí)漸變?yōu)樽纤{(lán)色*/ to(violet));/*結(jié)束顏色*/ height:100px; } .angular { background-image: -moz-linear-gradient(0px 0px, 100px 100px, from(red),/*起始顏色*/ color-stop(16%, orange),/*到高的16%的位置時(shí)漸變?yōu)槌壬?/ color-stop(32%, yellow),/*到高的32%的位置時(shí)漸變?yōu)辄S色*/ color-stop(48%, green),/*到高的48%的位置時(shí)漸變?yōu)榫G色*/ color-stop(64%, blue),/*到高的64%的位置時(shí)漸變?yōu)樗{(lán)色*/ color-stop(80%, indigo),/*到高的80%的位置時(shí)漸變?yōu)樽纤{(lán)色*/ to(violet));/*結(jié)束顏色*/ height:100px; } </style> <h3 class="vertical ">記得要用最新版本的firefox運(yùn)行。</h3> <div   id="vvxyksv9kd"   class="horizontal">上面是垂直漸變，這里是水平漸變。</div> <div   id="vvxyksv9kd"   class="angular">角度漸變</div>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

接著下來看看-webkit-gradient這個(gè)CSS屬性，用法來-moz-linear-gradient差不多，但有三點(diǎn)不同。第一個(gè)參數(shù)用來決定是線性漸變與放射性漸變，這里寫linear就可以了。兩個(gè)點(diǎn)值，一定要為left,right,top與bottom的兩個(gè)，而且怎樣組合也實(shí)現(xiàn)不了角度漸變。三是color-stop的偏移量一定為小數(shù)。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

結(jié)語，這就是多種瀏覽器共存的帶來的和諧局面，我寧愿IE實(shí)現(xiàn)完全壟斷了。下一部分才是征途的開始，光IE處理濾鏡失效的問題，就要?jiǎng)佑胻able這個(gè)上古神器了。SVG，在上面的運(yùn)框中，你們看到了，我還特意搞了一個(gè)小工具來創(chuàng)建這些特殊的對(duì)象……