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