绘制线性渐变

绘制线性渐变要用到：createLinearGradient，方法如：XXX.createLinearGradient(xStart,yStart,xEnd,yEnd);

xStart为渐变起始地点的横坐标，yStart为渐变起始地点的纵坐标，xEnd为渐变结束地点的横坐标，yEnd为渐变起始地点的纵坐标。

 

绘制完坐标后用addColorStop来设定渐变的颜色，方法如：XXX.addColorStop(offset,color);

offset为所设定颜色离开渐变起点的偏移量，在0-1之间。color为绘制的颜色。

 

 

 1 <!DOCTYPE html>
 2 <meta charset="utf-8">
 3 <head>
 4 </head>
 5 
 6 <body>
 7 <canvas id="jianbian" width="1000" height="1000"></canvas>
 8 <script type="text/javascript">
 9 var c=document.getElementById("jianbian");
10 var cxt=c.getContext("2d");
11 var grd=cxt.createLinearGradient(0,0,1000,1000);
12 grd.addColorStop(0,"#FF0000");
13 grd.addColorStop(1,"#00FF00");
14 cxt.fillStyle=grd;
15 cxt.fillRect(0,0,1000,1000);
16 </script>
17 </body>
18 </html>
posted @ 2012-09-03 17:47  yexingwen  阅读(365)  评论(0)  编辑  收藏  举报