可以先使用HTML Canvas的径向渐变的函数createRadialGradient()来创建一个放射状/圆形渐变对象；然后使用addColorStop()方法定义渐变颜色；最后使用fillStyle属性填充渐变颜色，使用fillRect()等方法来绘制“已填色”的形状，如矩形，圆形，线条，文本等。
实现径向渐变效果所要的方法有：
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>
效果图：
以上就是本篇文章的详细内容，更多请关注php中文网其它相关文章！
网友评论