整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
變是兩種或更多顏色的平滑過(guò)渡，是指在顏色集上使用逐步抽樣算法，并將結(jié)果應(yīng)用于描邊樣式和填充樣式中。canvas的繪圖上下文支持兩種類(lèi)型的漸變：線(xiàn)性漸變和放射性漸變，其中放射性漸變也稱(chēng)徑向漸變。
繪制漸變圖形
創(chuàng)建一個(gè)簡(jiǎn)單的漸變非常容易，可能比使用Photoshop還要快，需要三個(gè)步驟。
（1）創(chuàng)建漸變對(duì)象。
var gradient=cxt.createRadialGradient（0，0，0，canvas.height）；
（2）為漸變對(duì)象設(shè)置顏色，指明過(guò)渡方式。
gradient.addColorStop(0,'#fff');
gradient.addColorStop(1,'#000');
（3）在context上為填充樣式或者描邊樣式設(shè)置漸變。
cxt.fillStyle=gradient;
要設(shè)置顯示顏色，在漸變對(duì)象上使用addColorStop函數(shù)即可。除了可以變換成其他顏色外，還可以為顏色設(shè)置alpha值（例如透明），并且alpha值也是可以變換的。為了達(dá)到這樣的效果，需要使用顏色值的另一種表示方法，如內(nèi)置alpha組建的CSSrgba函數(shù)。
繪制線(xiàn)性漸變，會(huì)使用到如下表所示幾個(gè)方法。
（1）編寫(xiě)代碼如下圖所示：
（2）在瀏覽器中打開(kāi)文件，預(yù)覽效果圖如下所示，可以看到網(wǎng)頁(yè)中創(chuàng)建了一個(gè)垂直方向上的漸變，從上到下顏色逐漸變淺。
小提示：上面的代碼是2D環(huán)境對(duì)象產(chǎn)生了一個(gè)線(xiàn)性漸變對(duì)像，漸變的起始點(diǎn)是（0,0），漸變的結(jié)束點(diǎn)是（0，canvas.height），下面使用addColorStop函數(shù)設(shè)置漸變顏色，最后將漸變填充到上下文環(huán)境的樣式中。
下次將講繪制徑向漸變，HTML繪制漸變圖形（二）
用技巧會(huì)讓人變的越來(lái)越懶，沒(méi)錯(cuò)，我就是想讓你變懶。
下面是我收集的CSS高級(jí)技巧，希望你懶出境界。
這段代碼會(huì)讓你的彩色照片顯示為黑白照片，是不是很酷？
img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
效果圖：
下面這個(gè)簡(jiǎn)單的 CSS3 代碼片段可以給網(wǎng)頁(yè)加上漂亮的頂部陰影效果：
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
效果圖：
你不需要分別添加 line-height 到每個(gè)p,h標(biāo)記等。只要添加到 body 即可：
body {
line-height: 1;
}
這樣文本元素就可以很容易地從 body 繼承。
為了創(chuàng)建一個(gè)線(xiàn)性漸變，你必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過(guò)渡的顏色。同時(shí)，你也可以設(shè)置一個(gè)起點(diǎn)和一個(gè)方向（或一個(gè)角度）。
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標(biāo)準(zhǔn)的語(yǔ)法 */
}
效果圖：
突然發(fā)現(xiàn)紅到藍(lán)也太丑了點(diǎn)，換一個(gè)好看一點(diǎn)的，紅到綠:
h1
{ text-shadow: 5px 5px 5px #FF0000;
}
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
效果如圖：
今天的代碼寫(xiě)得我老闊疼，雖然CSS還有很多很多高級(jí)用法，但精力有限，因此今天的分享就到這里啦，需要詳細(xì)代碼可留言或私信我哦~
了線(xiàn)性漸變以外，HTML 5 Canvas API還支持徑向漸變（放射性漸變），就是顏色會(huì)介于兩個(gè)指定圓間的錐形區(qū)域平滑變化。徑向漸變和線(xiàn)性漸變使用了顏色終止點(diǎn)是一樣的，如果要實(shí)現(xiàn)它，就需要使用方法createRadialGradient。
繪制徑向漸變
createRadialGradient（x0，y0，r0，x1，y1，r1）方法表示沿著兩個(gè)圓之間的錐面繪制漸變。其中前三個(gè)參數(shù)代表開(kāi)始的圓，圓心為（x0，y0），半徑為r0。最后三個(gè)參數(shù)代表結(jié)束的圓，圓心為（x1，y1），半徑為r1。
（1）編寫(xiě)代碼如下圖所示，在<body>標(biāo)簽中加入以下代碼。
（2）在瀏覽器中打開(kāi)文件，預(yù)覽效果圖如下所示，可以看到網(wǎng)頁(yè)中，從圓心的中心亮點(diǎn)開(kāi)始向外逐步發(fā)散，形成了一個(gè)徑向漸變。
小提示：上面代碼中，首先創(chuàng)建漸變對(duì)象gradient，此處使用方法createRadialGradient創(chuàng)建了一個(gè)徑向漸變，下面使用addColorStop添加顏色，最后將漸變填充到上下文環(huán)境中。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
