HTML5简明教程-1.1.4.HTML5Canvas参考手册之线性渐变 createLinearGradient

来源：互联网发布：富士施乐mac驱动编辑：程序博客网时间：2024/06/07 11:40

本文连接：http://blog.csdn.net/tomorrow13210073213/article/details/42453769

转载请注明出处

HTML5的canvas为我们提供了类似于CSS3中linear-gradient属性定义的渐变效果，用createLinearGradient()方法可以创建基于画布的线性渐变，创建好的线性渐变可以用于填充路径、定义笔触等。同时，HTML5也为我们提供了createRadialGradient()方法用于创建放射渐变，我们将在另一篇博文中详细介绍。

方法：createLinearGradient()

方法名：createLinearGradient()

方法描述：用于创建基于整个画布的线性渐变，该渐变可以用于填充路径或定义笔触（作为属性fillStyle或strokeStyle的值）

js语法：context.createLinearGradient(x0,y0,x1,y1);
参数：x0：渐变开始点的 x 坐标，
参数：y0：渐变开始点的 y 坐标，
参数：x1：渐变结束点的 x 坐标，
参数：y1：渐变结束点的 y 坐标

浏览器兼容：IE 9、Firefox、Opera、Chrome 以及 Safari 支持 createLinearGradient() 方法。

使用注意：（1）获得渐变对象后，我们要使用 addColorStop() 方法规定不同的颜色，以及在渐变对象中的何处定位颜色。关于该方法，另有博文详述。

（2）我们用createLinearGradient()方法定义的渐变是基于整个canvas的，仅仅通过定义该渐变是看不到的，将该渐变定义为属性fillStyle或strokeStyle的值后，我们实际是将路径定义的矩形（面或笔触）、圆形（面或笔触）部分的渐变显示出来。

废话不多讲，下面是测试代码，js注释中有相关测试的描述：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Html5 Canvas createLinearGradient</title>    <style type="text/css">        body {            margin: 0px;            width: 440px;        }        canvas {            float: left;            margin-left: 10px;            margin-top: 10px;        }    </style></head><body>    <!--       createLinearGradient() 方法创建线性的渐变对象。       渐变可用于填充矩形、圆形、线条、文本等等。       该对象一般作为 strokeStyle 或 fillStyle 属性的值。       用方法 addColorStop() 规定不同的颜色，以及在 gradient 对象中的何处定位颜色。       语法：context.createLinearGradient(x0,y0,x1,y1);       参数：x0：渐变开始点的 x 坐标，       参数：y0：渐变开始点的 y 坐标，       参数：x1：渐变结束点的 x 坐标，       参数：y1：渐变结束点的 y 坐标   -->    <!--       addColorStop() 方法规定 gradient 对象中的颜色和位置。       addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。       可以多次调用 addColorStop() 方法来改变渐变，理论上可以定义无限中间色。如果您不对 gradient 对象使用该方法，那么渐变将不可见。为了获得可见的渐变，您需要创建至少一个色标。       语法：gradient.addColorStop(stop,color);       参数：stop:介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。       参数：color：在结束位置显示的 CSS 颜色值。   -->    <canvas id="can0" width="430" height="100"></canvas>    <canvas id="can" width="100" height="100"></canvas>    <canvas id="can2" width="100" height="100"></canvas>    <canvas id="can3" width="100" height="100"></canvas>    <canvas id="can4" width="100" height="100"></canvas>    <canvas id="can5" width="430" height="100"></canvas>    <canvas id="can6" width="430" height="100"></canvas>    <canvas id="can7" width="430" height="100"></canvas>    <canvas id="can8" width="430" height="100"></canvas></body><script type="text/javascript">    //可以用0-1之间的值定义中间颜色，理论上讲可以定义无限中间颜色    var c0 = document.getElementById('can0');    var cC0 = c0.getContext('2d');    //参数：(渐变开始点的 x 坐标，渐变开始点的 y 坐标，渐变结束点的 x 坐标，渐变结束点的 y 坐标)    //该方法的参数需要注意，后两个参数是坐标而不是长度,这一点与绘制矩形的相关方法不同    var lg0 = cC0.createLinearGradient(0, 0, 430, 0);    lg0.addColorStop(0, '#823835');    lg0.addColorStop(0.1, '#8abeb2');    lg0.addColorStop(0.2, '#c9ba83');    lg0.addColorStop(0.3, '#ddd38c');    lg0.addColorStop(0.4, '#de9c52');    lg0.addColorStop(0.5, '#44b37e');    lg0.addColorStop(0.6, '#823835');    lg0.addColorStop(0.7, '#8abeb2');    lg0.addColorStop(0.8, '#c9ba83');    lg0.addColorStop(0.9, '#ddd38c');    lg0.addColorStop(1, '#de9c52');    cC0.fillStyle = lg0;    cC0.fillRect(0, 0, 430, 100);    //左上角到右下角的渐变    var c = document.getElementById('can');    var cC = c.getContext('2d');    var lg = cC.createLinearGradient(0, 0, 100, 100);    lg.addColorStop(0, 'red');    lg.addColorStop(0.5, 'yellow');    lg.addColorStop(1, 'green');    cC.fillStyle = lg;    cC.fillRect(0, 0, 100, 100);    //垂直渐变    var c2 = document.getElementById('can2');    var cC2 = c2.getContext('2d');    var lg2 = cC2.createLinearGradient(0, 0, 0, 100);    lg2.addColorStop(0, 'red');    lg2.addColorStop(0.5, 'yellow');    lg2.addColorStop(1, 'green');    cC2.fillStyle = lg2;    cC2.fillRect(0, 0, 100, 100);    //水平渐变    var c3 = document.getElementById('can3');    var cC3 = c3.getContext('2d');    var lg3 = cC3.createLinearGradient(0, 0, 100, 0);    lg3.addColorStop(0, 'red');    lg3.addColorStop(0.5, 'yellow');    lg3.addColorStop(1, 'green');    cC3.fillStyle = lg3;    cC3.fillRect(0, 0, 100, 100);    //左下角到右上角的渐变    var c4 = document.getElementById('can4');    var cC4 = c4.getContext('2d');    var lg4 = cC4.createLinearGradient(0, 100, 100, 0);    lg4.addColorStop(0, 'red');    lg4.addColorStop(0.5, 'yellow');    lg4.addColorStop(1, 'green');    cC4.fillStyle = lg4;    cC4.fillRect(0, 0, 100, 100);    //createLinearGradient()方法所定义的渐变是针对于整个canvas的渐变，    //当起点坐标不是0时，起点之前的颜色将是起点颜色（addColorStop(0, 'red')），    //终点之后的颜色将是终点颜色（lg5.addColorStop(1, 'green')）    var c5 = document.getElementById('can5');    var cC5 = c5.getContext('2d');    var lg5 = cC5.createLinearGradient(100, 0, 300, 0);    lg5.addColorStop(0, 'red');    lg5.addColorStop(0.5, 'yellow');    lg5.addColorStop(1, 'green');    cC5.fillStyle = lg5;    cC5.fillRect(0, 0, 430, 100);    //正如前文所说，用createLinearGradient()方法定义渐变的渐变是针对于整个canvas的渐变，    //我们用该渐变作为填充或笔触进行绘制时，实际是将我们绘制部分的渐变颜色显示出来    var c6 = document.getElementById('can6');    var cC6 = c6.getContext('2d');    var lg6 = cC6.createLinearGradient(100, 0, 300, 0);    lg6.addColorStop(0, 'red');    lg6.addColorStop(0.5, 'yellow');    lg6.addColorStop(1, 'green');    cC6.fillStyle = lg6;    cC6.fillRect(0, 0, 100, 100);    cC6.fillRect(330, 0, 100, 100);    cC6.fillRect(150, 0, 100, 100);    //createLinearGradient()方法所定义的渐变是针对于整个canvas的渐变，    //当起点坐标不是0时，起点之前的颜色将是起点颜色（addColorStop(0, 'red')），    //终点之后的颜色将是终点颜色（lg5.addColorStop(1, 'green')）    var c7 = document.getElementById('can7');    var cC7 = c7.getContext('2d');    var lg7 = cC7.createLinearGradient(0, 0, 0, 100);    lg7.addColorStop(0, 'red');    lg7.addColorStop(0.5, 'yellow');    lg7.addColorStop(1, 'green');    cC7.fillStyle = lg7;    cC7.fillRect(0, 0, 430, 100);    //正如前文所说，用createLinearGradient()方法定义渐变的渐变是针对于整个canvas的渐变，    //我们用该渐变作为填充或笔触进行绘制时，实际是将我们绘制部分的渐变颜色显示出来    var c8 = document.getElementById('can8');    var cC8 = c8.getContext('2d');    var lg7 = cC8.createLinearGradient(0, 0, 0, 100);    lg7.addColorStop(0, 'red');    lg7.addColorStop(0.5, 'yellow');    lg7.addColorStop(1, 'green');    cC8.fillStyle = lg7;    cC8.fillRect(0, 0, 100, 100);    cC8.fillRect(330, 0, 100, 100);    cC8.fillRect(165, 0, 100, 100);</script></html>

下面是测试效果图：

（图片传不上来啊，csdn咋啦，大家自己测试吧）

0 0

HTML5简明教程-1.1.4.HTML5Canvas参考手册 之 线性渐变 createLinearGradient

HTML5简明教程-1.1.4.HTML5Canvas参考手册之线性渐变 createLinearGradient