HTML5学习笔记-绘制渐变图形

绘制线性渐变

step1 创建渐变对象：
var gradient=cxt.createLinearGradient(x0,y0,x1,y1);
沿直线从（x0，y0)到（x1，y1）渐变；
step2 为渐变对象设置颜色，指明过渡方式：
gradient.addColorStop(0,'#fff');
gradient.addColorStop(1,'#000');
参数为偏移量和颜色，偏移量是0.0到1.0之间的数值，代表沿着渐变线渐变的距离有多远。
step3 在context上为填充样式或者描边样式设置渐变：
cxt.fillStyle=gradient;

 1 <h3>绘制线性渐变对象</h3>
 2 <!--canvas id="canvas" width="400" height="300" style="border:1px solid red" /-->
 3 <canvas id="canvas1" width="400" height="300" style="border:1px solid blue;">
 4 Your browser does not support the canvas element.
 5 </canvas>
 6 <script type="text/javascript">
 7 var c=document.getElementById('canvas1');
 8 var cxt=c.getContext("2d");
 9 var gradient=cxt.createLinearGradient(0,0,0,canvas1.height);
10 gradient.addColorStop(0,'transparent'); //可以设置颜色为alpha值
11 gradient.addColorStop(1,'#3af');
12 cxt.fillStyle=gradient;
13 cxt.fillRect(0,0,400,400);
14 </script>

绘制径向渐变

所谓放射渐变，指颜色介于两个指定圆之间的锥形区域平滑变化。放射渐变与线性渐变使用的颜色终止点
是一样的。使用createRadialGradient()方法。
createRadialGradient(x0,y0,r0,x1,y1,r1);开始圆的圆心(x0,y0)，半径r0，结束圆的圆心(x1,y1)，半径r1。

绘制径向渐变图形的步骤与绘制线性渐变的步骤相同。

 1 <h3>径向渐变对象</h3>
 2 <!--canvas id="canvas2" width="400" height="300" style="border:1px solid red" /-->
 3 <canvas id="canvas2" width="400" height="300" style="border:1px solid blue;">
 4 Your browser does not support the canvas element.
 5 </canvas>
 6 <script type="text/javascript">
 7 var c=document.getElementById('canvas2');
 8 var cxt=c.getContext("2d");
 9 var gradient=cxt.createRadialGradient(canvas2.width/2,canvas2.height/2,0,canvas2.width/2,canvas2.height/2,150);
10 gradient.addColorStop(0,'#fff'); 
11 gradient.addColorStop(1,'#000');
12 cxt.fillStyle=gradient;
13 cxt.fillRect(0,0,400,400);
14 </script>

效果如下：

 

转载于:https://www.cnblogs.com/yunxiang-2013/p/5669303.html