HTML5的渐变色渐变的两种类型 createLinearGradient 和createRadialGradient

浏览数：98 / 时间：2015年06月09日

今天又再看了html5的颜色渐变API，发现没有第一次看那么复杂。

不过我对这个颜色渐变存在着一个疑惑就是两种色带之间，那段是属于两种颜色混合的，有点模糊。

比如从红色变成黄色，在红与黄之间的那个地方，不会是纯色的红和黄，我一开始不是很明白，现在我是理解的：渐变颜色嘛，字面上的意思，就是渐变，在这两种颜色之间，由一种颜色渐变过渡到另一种颜色。

一、创建渐变颜色对象的步骤蛮简单的，线性渐变比径向渐变少了两个参数而已。具体步骤是这样的：

1、获取到你的canvas画布后，我们需要创建颜色渐变对象 var gradient

2、设置要渐变的颜色带 addColorStop(颜色带的所在点,"颜色")

3、将颜色渐变对象赋值给填充类型 fillStyle

4、进行绘制

ok了！

<body>
        <!--
            作者：[email protected]
            时间：2014-04-12
            描述：渐变色   linear   radial
        -->
        <canvas id="myCanvas" width="300" height="150" style="border: 1px solid black"></canvas>
        <script>
            var myCanvas = document.getElementById("myCanvas");
            var context = myCanvas.getContext("2d");
            var gradient = context.createLinearGradient(0,0,myCanvas.width,0);     //创建颜色渐变对象
            
            
            gradient.addColorStop(0,‘blue‘);                                       //设置颜色停止点(过渡颜色所在位置)
            gradient.addColorStop(0.25,‘white‘);
            gradient.addColorStop(0.5,‘purple‘);
            gradient.addColorStop(0.75,‘red‘);
            gradient.addColorStop(1.0,‘yellow‘);
            
            context.fillStyle = gradient;                       //把渐变对象赋值给填充类型
            context.fillRect(0,0,myCanvas.width,myCanvas.height); //绘制图形
        </script>
        <!--
            作者：[email protected]
            时间：2014-04-12
            描述：径向渐变
        -->
        <canvas id="myCanvas2" width="300" height="150" style="border: 1px solid black">换个浏览器呗</canvas>
        <script>
            var myCanvas2 = document.getElementById("myCanvas2");
            var context2 = myCanvas2.getContext("2d");
            //var gradient2 = context.createRadialGradient(0,0,myCanvas2.width,myCanvas2.width,myCanvas2.height,myCanvas2.height);     //创建颜色径向渐变对象
            var gradient2 = context2.createRadialGradient(myCanvas2.width/2,myCanvas2.height/2,0,myCanvas2.width/2,myCanvas2.height/2,100);     //创建颜色径向渐变对象(一个圆从中间向四周径向渐变)
            
            gradient2.addColorStop(0,‘blue‘);                    //设置颜色停止点(过渡颜色所在位置)
            gradient2.addColorStop(0.25,‘white‘);
            gradient2.addColorStop(0.5,‘purple‘);
            gradient2.addColorStop(0.75,‘red‘);
            gradient2.addColorStop(1.0,‘yellow‘);
            
            context2.fillStyle = gradient2;
            context2.fillRect(0,0,myCanvas2.width,myCanvas2.height);
        </script>
    </body>

两种颜色渐变函数的参数说明：

context.createLinearGradient(x0,y0,x1,y1);

参数	描述
x0	渐变开始点的 x 坐标
y0	渐变开始点的 y 坐标
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径