圆形渐变必须先使用createRadialGradient方法创建Radial Gradient对象,之后同样再用addColorStop方法添加渐变色并指定给fillStyle或strokeStyle
属性使用。
context.createRadialGradient(xS,yS,rS,xE,yE,rE);
前2个参数定义渐变起点的坐标(xS,yS)和半径rS,后3个参数定义渐变终点的坐标(xE,yE)和半径rE,例如
context.createRadialGradient(200,200,50,200,200,150);
<!DOCTYPE html>
<html>
<head>
<meta charset=" ">
<title>ch10_10</title>
<script type="text/javascript">
function drawCircle() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//渐变样式声明
//圆A
var radgradA = ctx.createRadialGradient(15,15,0,15,15,40);
radgradA.addColorStop(0, '#006600');
radgradA.addColorStop(0.7, '#99ff66');
radgradA.addColorStop(1, 'rgba(0,255,0,0)');
//圆B
var radgradB = ctx.createRadialGradient(60,70,0,60,80,50);
radgradB.addColorStop(0, '#ff00ff');
radgradB.addColorStop(0.5, '#cc00ff');
radgradB.addColorStop(1, 'rgba(255,0,128,0)');
//圆C
var radgradC = ctx.createRadialGradient(170,120,0,150,130,80);
radgradC.addColorStop(0, '#ffffff');
radgradC.addColorStop(0.6, '#6666ff');
radgradC.addColorStop(1, 'rgba(0,201,255,0)');
//圆D
var radgradD = ctx.createRadialGradient(180,60,0,180,60,100);
radgradD.addColorStop(0, '#F4F201');
radgradD.addColorStop(1, 'rgba(228,199,0,0)');
//开始绘图
//圆D
ctx.fillStyle = radgradD;
ctx.beginPath();
ctx.arc(180, 60, 100, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
//圆A
ctx.fillStyle = radgradA;
ctx.beginPath();
ctx.arc(15, 15, 40, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
//圆B
ctx.fillStyle = radgradB;
ctx.beginPath();
ctx.arc(60, 70, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
//圆C
ctx.fillStyle = radgradC;
ctx.beginPath();
ctx.arc(150, 130, 40, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
</script>
<!--style标记内是CSS语法-->
<style type="text/css">
canvas { border: 1px solid black; } //将框线设为1px
</style>
</head>
<body>
<input type="button" value=" 圆形渐变 " onclick="drawCircle();">
<p>
<canvas id="myCanvas" width="230" height="200"></canvas>
</body>
</html>