canvas渐变色：canvas怎样完成渐变色的结果？【html5教程】

在我们翻开某个网页的时刻，可能会看到有的页面中有色彩的渐变，觉得很悦目，那末，这类渐变色是怎样完成的呢？所谓渐变色实在就是色彩之间的过渡，而html5 Canvas渐变是一种用于添补或描边图形的色彩形式，所以，应用canvas怎样完成色彩的渐变？本篇文章就来给人人引见一下canvas渐变色的完成。

我们要知道canvas供应了两个对象来建立渐变，渐变能够添补在矩形、文本、线条等。

canvas渐变能够分为线性渐变和径向渐变：

canvas建立线性渐变的函数是createLinearGradient(x,y,x1,y1)

canvas建立径向渐变的函数是createRadialGradient(x,y,r,x1,y1,r1)

下面我们就来离别看看canvas的线性渐变和径向渐变怎样完成色彩的渐变。

起首来看一下canvas线性渐变：

线性渐变是以线性的形式来转变色彩，也就是程度，垂直或对角方向。

我们直接来看canvas线性渐变的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <canvas id="myCanvas"></canvas>
   <script type="text/javascript">
       var canvas=document.getElementById("myCanvas");
       if(canvas && canvas.getContext){
           var ctx=canvas.getContext("2d");
           var grad=ctx.createLinearGradient(0,0,300,0); //建立一个渐变色线性对象
           grad.addColorStop(0,"yellow");                  //定义渐变色色彩
           grad.addColorStop(1,"green");
           ctx.fillStyle=grad;                         //设置fillStyle为当前的渐变对象
           ctx.fillRect(0,0,300,100);                    //绘制渐变图形
       }
   </script>
</body>
</html>

canvas线性渐变结果以下：

申明：上面这个canvas线性渐变的例子完成的是程度方向的渐变，假如想要完成垂直方向的渐变色只须要将参数y和y1设置为差别就能够了，想要完成对角方向的渐变色则须要将程度和垂直方向上的参数都设置为差别。（ps：细致的完成能够本身尝尝，这里就不多说了）

看完了线性渐变我们就来看一下canvas径向渐变的实现。

径向渐变是以圆形形式来转变色彩的，色彩以圆形的中间向外散布。

我们也来直接看一个canvas径向渐变的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="400px" height="300px"></canvas>
<script type="text/javascript">
    var canvas=document.getElementById("myCanvas");
    if(canvas && canvas.getContext){
        var ctx=canvas.getContext("2d");
        var grad=ctx.createRadialGradient(200,200,50,200,200,200) //建立一个渐变色线性对象
        grad.addColorStop(0,"yellow");                  //定义渐变色色彩
        grad.addColorStop(1,"green");
        ctx.fillStyle=grad;                         //设置fillStyle为当前的渐变对象
        ctx.fillRect(0,0,400,400);                    //绘制渐变图形
    }
</script>
</body>
</html>

canvas径向渐变的结果以下：