HTML5 canvas createRadialGradient()放射状/圆形渐变

定义和用法

createLinearGradient() 方法创建放射状/圆形渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

原理示意图

JavaScript 语法：

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数值

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

实例：

<canvas id="canvas1" width="200" height="200" style="border:1px solid blue;"></canvas>
<script>
    var canvas = document.getElementById('canvas1');
    var ctx = canvas.getContext('2d');

    var grd = ctx.createRadialGradient(100, 100, 5, 100, 100, 100);
    grd.addColorStop(0, 'red');
    grd.addColorStop(1, 'white');
    //使用经向渐变
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createRadialGradient() 方法。

注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

原理示意说明：

    <canvas id="canvas1" width="400" height="400" style="border:1px solid blue;"></canvas>
    <script>
        var canvas = document.getElementById('canvas1');
        var ctx = canvas.getContext('2d');

        //当cycle1在cycle2里边时，并且圆心重合
        var cycle1 = {
            x: 200,
            y: 200,
            r: 25
        };
        var cycle2 = {
            x: 200,
            y: 200,
            r: 80
        };

        ctx.beginPath();
        ctx.arc(cycle1.x, cycle1.y, cycle1.r, 0, Math.PI * 2, false);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(cycle2.x, cycle2.y, cycle2.r, 0, Math.PI * 2, false);
        ctx.stroke();

        //使用经向渐变
        var grd = ctx.createRadialGradient(cycle1.x, cycle1.y, cycle1.r, cycle2.x, cycle2.y, cycle2.r);
        grd.addColorStop(0, 'rgba(255,0,0,0.75)');
        grd.addColorStop(0.5, 'rgba(0,255,0,0.75)');
        grd.addColorStop(1, 'rgba(0,0,255,0.75)');

        ctx.fillStyle = grd;
        ctx.fillRect(0, 0, 500, 500);

    </script>