1 canvas畫布裡的漸變:

    要建立一個新的線性漸變，可以呼叫createLinearGradient()方法。這個方法接收4 個引數：起點的x 座標、起點的y 座標、終點的x 座標、終點的y 座標。呼叫這個方法後，它就會建立一個指定大小的漸變，並返回CanvasGradient 物件的例項。

    建立了漸變物件後，下一步就是使用addColorStop()方法來指定色標。這個方法接收兩個引數：色標位置和CSS 顏色值。色標位置是一個0（開始的顏色）到1（結束的顏色）之間的數字.

    然後就可以把fillStyle 或strokeStyle 設定為這個物件,從而使用漸變來繪製形狀或描邊.

舉個例子:

<canvas id="drawing" width="200px" height="200px"></canvas>
    <script>
        var d=document.getElementById("drawing");
        var context=d.getContext("2d");
        var gradient = context.createLinearGradient(30, 30, 50, 50);
        gradient.addColorStop(0, "white");
        gradient.addColorStop(1, "blue");
        context.fillStyle = gradient;
        context.fillRect(30, 30, 50, 50);
    </script>
 

執行結果:

2 svg裡面的漸變:

svg裡面是用<linearGradient>來定義線性漸變.<linearGradient>標籤要定義在<defs>的內部.

通過<stop>標籤來定義漸變範圍,offset來定義漸變開始和結束的位置.

線性漸變可被定義為水平、垂直或角形的漸變：
當 y1 和 y2 相等，而 x1 和 x2 不同時，可建立水平漸變
當 x1 和 x2 相等，而 y1 和 y2 不同時，可建立垂直漸變

當 x1 和 x2 不同，且 y1 和 y2 不同時，可建立角形漸變

舉個例子(垂直漸變)

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%"
 
 x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>

</svg>

結果圖:

x1!=x2,y1=y2時,是水平方向漸變

當x1=x2,y1!=y2時,是垂直方向漸變

角型漸變(模擬光的照射效果)

<svg width="100%" height="100%" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="light" x1="20%" y1="20%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color: whitesmoke"></stop>
                <stop offset="100%" style="stop-color:  #394057"></stop>
            </linearGradient>
        </defs>
        <rect x="120" y="10" width="150" height="80" style="fill: url(#light)"/>
    </svg>

結果圖:

3 css3裡面的漸變:

3.1 直線漸變

background-image的屬性值,例如:

 background-image: linear-gradient(to  top,orange,green);

第一個引數是漸變的方向,第二個引數是起始漸變的顏色,第三個引數是漸變結束的顏色

結果如下:

第一個引數可以取 top bottom left right也可以是left right 和top bottom的組合,順序不限

除此之外,第一個引數也可以是漸變方向角度,舉個例子:

background-image: linear-gradient(45deg,orange,green);

效果圖:

3.2 css3徑向漸變:

徑向漸變就是以一個點為中心,向四周漸變,css3中用徑向漸變有些需要加上瀏覽器字首,

舉個例子:

background-image: -webkit-radial-gradient(hsla(100,70%,60%,.9),hsla(360,60%,60%,.5));

W3C組織從2013年規定了徑向語法:

radial-gradient(<shape> ||<size> at <position>?,|at <position>? <color stop>, <color stop>)

舉個例子:

 background: -webkit-radial-gradient(circle at top center,#f28fb8,#e982ad,#ec568c);

 background-image:
                                radial-gradient(transparent 70%,rgba(0,0,0,1) 99%);