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;

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

绘制径向渐变

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

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

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

效果如下：