前端里的几种颜色渐变

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%);