绘制线性渐变

最新推荐文章于 2021-08-12 00:25:03 发布

weixin_30908103

最新推荐文章于 2021-08-12 00:25:03 发布

阅读量186

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/52css/archive/2012/09/03/2669205.html

版权

绘制线性渐变要用到：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>