<!DOCTYPE HTML>
<html>
<head>
<title>createRadialGradient</title>
<script type="text/javascript">
function draw(){
var cxt = document.getElementById("myCanvas").getContext("2d");
//创建渐变
var radgrad = cxt.createRadialGradient(45,45,10,52,50,30);
radgrad.addColorStop(0,'#A7D30C');
radgrad.addColorStop(0.9,'#019F62');
radgrad.addColorStop(1,'rgba(1,159,98,0)');
var radgrad2 = cxt.createRadialGradient(105,105,20,112,120,50);
radgrad2.addColorStop(0,'#FF5F98');
radgrad2.addColorStop(0.75,'#FF0188');
radgrad2.addColorStop(1,'rgba(255,1,136,0)');
var radgrad3 = cxt.createRadialGradient(95,15,15,102,20,40);
radgrad3.addColorStop(0,'#00C9FF');
radgrad3.addColorStop(0.8,'#00B5E2');
radgrad3.addColorStop(1,'rgba(0,201,255,0)');
var radgrad4 = cxt.createRadialGradient(0,150,50,0,140,90);
radgrad4.addColorStop(0,'#F4F201');
radgrad4.addColorStop(0.8,'#e4C700');
radgrad4.addColorStop(1,'rgba(228,199,0,0)');
//绘制图形
cxt.fillStyle=radgrad4;
cxt.fillRect(0,0,150,150);
cxt.fillStyle=radgrad3;
cxt.fillRect(0,0,150,150);
cxt.fillStyle=radgrad2;
cxt.fillRect(0,0,150,150);
cxt.fillStyle=radgrad;
cxt.fillRect(0,0,150,150);
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" height="150" width="150" style="border:2px solid #06c;"></canvas>
</body>
</html>
显示效果如下：
【createRadialGradient(x1,y1,r1,x2,y2,r2)，方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。实例中定义了 4 个不同的径向渐变。由于可以控制渐变的起始与结束点，所以可以实现一些比（如在 Photoshop 中所见的）经典的径向渐变更为复杂的效果。经典的径向渐变是只有一个中心点，简单地由中心点向外围的圆形扩张。此例中起点稍微偏离终点，这样可以达到一种球状 3D 效果。但最好不要让里圆与外圆部分交叠。4 个径向渐变效果的最后一个色标都是透明色。如果想要两色标直接的过渡柔和一些，只要两个颜色值一致就可以了。代码里面看不出来，是因为我用了两种不同的颜色表示方法，但其实是相同的，#019F62 = rgba(1,159,98,1)。】