HTML5简明教程-1.1.4.HTML5Canvas参考手册 之 放射渐变 createRadialGradient
本文连接:http://blog.csdn.net/tomorrow13210073213/article/details/42486639
转载请注明出处
在前一篇博文中我们介绍过HTML5的canvas为我们提供了绘制线性渐变的相关方法,本篇中我们会介绍HTML5的另一种渐变,放射渐变。创建放射渐变的方法是createRadialGradient()。与线性渐变相同,用createRadialGradient()方法可以创建基于画布的线性渐变,创建好的线性渐变可以用于填充路径、定义笔触等。
方法:createRadialGradient()
方法名:createRadialGradient()
方法描述:用于创建基于整个画布的放射渐变,该渐变可以用于填充路径或定义笔触(作为属性fillStyle或strokeStyle的值)
js语法:context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数:x0:渐变的开始圆的 x 坐标,
参数:y0:渐变的开始圆的 y 坐标,
参数:r0:开始圆的半径,
参数:x1:渐变的结束圆的 x 坐标,
参数:y1:渐变的结束圆的 y 坐标,
参数:r1:结束圆的半径
浏览器兼容:IE 9、Firefox、Opera、Chrome 以及 Safari 支持 createLinearGradient() 方法。
使用注意:(1)获得渐变对象后,我们要使用 addColorStop() 方法规定不同的颜色,以及在渐变对象中的何处定位颜色。关于该方法,另有博文详述。
(2)我们用createRadialGradient()方法定义的渐变是基于整个canvas的,仅仅通过定义该渐变是看不到的,将该渐变定义为属性fillStyle或strokeStyle的值后,我们实际是将路径定义的矩形(面或笔触)、圆形(面或笔触)部分的渐变显示出来。
createRadialGradient()方法的定义及应用与createLinearGradient()基本相同,仅仅由于两者定义的渐变类型不同,其参数有所不同。
下面是我们的测试代码:
<!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; } .radius { border-radius: 50px; } </style> </head> <body> <!-- createRadialGradient() 方法创建放射状/圆形渐变对象。 与createLinearGradient()相同,渐变可用于填充矩形、圆形、线条、文本等等。 该对象一般作为 strokeStyle 或 fillStyle 属性的值。 用方法 addColorStop() 规定不同的颜色,以及在 gradient 对象中的何处定位颜色。 语法:context.createRadialGradient(x0,y0,r0,x1,y1,r1); 参数:x0:渐变的开始圆的 x 坐标, 参数:y0:渐变的开始圆的 y 坐标, 参数:r0:开始圆的半径, 参数:x1:渐变的结束圆的 x 坐标, 参数:y1:渐变的结束圆的 y 坐标, 参数:r1:结束圆的半径 --> <canvas id="can" width="100" height="100"></canvas> <canvas id="can2" width="100" height="100" class="radius"></canvas> <canvas id="can3" width="100" height="100"></canvas> </body> <script type="text/javascript"> //左上角到右下角的渐变 var c = document.getElementById('can'); var cC = c.getContext('2d'); //参数:(渐变的开始圆的 x 坐标,渐变的开始圆的 y 坐标,开始圆的半径,渐变的结束圆的 x 坐标,渐变的结束圆的 y 坐标,结束圆的半径) var rg = cC.createRadialGradient(50, 50, 10, 50, 50, 50); rg.addColorStop(0, 'red'); rg.addColorStop(1, 'yellow'); cC.fillStyle = rg; cC.fillRect(0, 0, 100, 100); var c2 = document.getElementById('can2'); var cC2 = c2.getContext('2d'); var rg2 = cC2.createRadialGradient(50, 50, 10, 50, 50, 50); rg2.addColorStop(0, 'red'); rg2.addColorStop(1, 'yellow'); cC2.fillStyle = rg2; cC2.fillRect(0, 0, 100, 100); var c3 = document.getElementById('can3'); var cC3 = c3.getContext('2d'); var rg3 = cC3.createRadialGradient(0, 0, 80, 0, 0, 100); rg3.addColorStop(0, 'yellow'); rg3.addColorStop(1, 'red'); cC3.fillStyle = rg3; cC3.fillRect(0, 0, 100, 100); </script> </html>
下面是测试效果图:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。