实现径向渐变效果所要的方法有:
createLinearGradient()方法创建放射状/圆形渐变对象;渐变可用于填充矩形、圆形、线条、文本等等。
JavaScript 语法:
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数值:
● x0:定义渐变的开始圆的 x 坐标
● y0:定义渐变的开始圆的 y 坐标
● r0 :定义开始圆的半径
● x1:定义渐变的结束圆的 x 坐标
● y1:定义渐变的结束圆的 y 坐标
● r1:定义结束圆的半径
addColorStop()方法规定渐变对象中的颜色和位置。可以使用addColorStop()方法规定不同的颜色,以及在渐变对象中的何处定位颜色。
fillStyle属性设置或返回用于填充绘画的颜色、渐变或模式。
fillRect()方法绘制“已填色”的矩形。默认的填充颜色是黑色。
示例1:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> </head> <body style="text-align:center;"> <canvas id="myCanvas" width="350" height="180"></canvas> <script> var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); //创建一个径向渐变对象 var radgrad = ctx.createRadialGradient(100,100,20,100,100,50); //定义渐变色颜色 radgrad.addColorStop(0, 'red'); radgrad.addColorStop(0.3, 'yellow'); radgrad.addColorStop(1, 'blue'); ctx.fillStyle = radgrad; //设置用于填充绘画的颜色、渐变或模式 ctx.fillRect(50,50,150,150);//绘制渐变图形 </script> </body> </html>
效果图:
示例2:绘制具有径向渐变的球
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> </head> <body style="text-align:center;"> <h2>线性渐变效果</h2> <canvas id="myCanvas" width="350" height="180"></canvas> <script> var canvas= document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); function circle(x, y, r, c) { ctx.beginPath(); var rad = ctx.createRadialGradient(x, y, 1, x, y, r); rad.addColorStop(0, 'rgba('+c+',1)'); rad.addColorStop(1, 'rgba('+c+',0)'); ctx.fillStyle = rad; ctx.arc(x, y, r, 0, Math.PI*2, false); ctx.fill(); } circle(128, 128, 200, '255,0,0'); circle(64, 64, 30,'0,255,0'); </script> </body> </html>
效果图:
示例3:使用渐变色绘制环
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> </head> <body style="text-align:center;"> <canvas id="myCanvas" width="350" height="180"></canvas> <script> var canvas= document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var radgrad = ctx.createRadialGradient(60, 60, 0, 60, 60, 60); radgrad.addColorStop(0.8, 'rgba(255,0,0,0)'); radgrad.addColorStop(0.85,'rgba(255,0,0,.6)'); radgrad.addColorStop(0.9, 'rgba(255,0,0,1)'); radgrad.addColorStop(0.95,'rgba(255,0,0,.6)'); radgrad.addColorStop(1, 'rgba(255,0,0,0)'); ctx.fillStyle = radgrad; ctx.arc(60, 60, 60, 0, 2 * Math.PI, true); ctx.fill(); </script> </body> </html>
效果图:
以上就是HTML Canvas如何实现径向渐变效果?的详细内容,更多请关注0133技术站其它相关文章!