代码和线性渐变的代码十分类似。只不过这里使用的是createRadialGradient,我们给他传入参数createRadialGradient(300,300,0,300,300,500),前三个参数定义的是在画布中心，半径为0的一个点。后三个参数定义的是在画布中心半径为500的一个大圆。这样就定义了一个从一个点向外辐射的一个径向渐变。看一下代码
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>径向渐变</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display:block;margin:0 auto"></canvas>
</body>
</html>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;
if (canvas.getContext("2d")) {
var context = canvas.getContext("2d");
var radialGrad = context.createRadialGradient(300, 300, 0, 300, 300, 500);
radialGrad.addColorStop(0.0, '#fff');
radialGrad.addColorStop(0.25, '#FB3');
radialGrad.addColorStop(0.5, '#690');
radialGrad.addColorStop(0.75, '#09C');
radialGrad.addColorStop(1.0, '#000');
context.fillStyle = radialGrad;
context.fillRect(0, 0, 600, 600);
} else {
alert('您的浏览器不支持canvas,请更换浏览器尝试~')
}
}
</script>
效果图:
大家可以试着改变一下参数来看看会有什么不同的效果。
