本文连接: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咋啦,大家自己测试吧)