HTML5 canvas createRadialGradient()放射狀/圓形漸變

本文轉載自查看原文 2016-09-22 12:20 8416 HTML5-Canvas/ 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>