canvas徑向漸變詳解

創建徑向漸變步驟如下：

1，創建徑向漸變對象 createRadialGradient(x0,y0,r0,x1,y1,r1)，其中x0,y0,r0分別為起始圓的位置坐標和半徑，x1,y1,r1為終止圓的坐標和半徑。

2，設置漸變顏色 addColorStop(position,color)，position為從0.0~1.0之間的值，表示漸變的相對位置；color是一個有效的css顏色值。

3，設置畫筆顏色為該徑向漸變對象。

4，畫圖。

 

例：

    var c = document.getElementById('mycanvas').getContext('2d');

    var radial = c.createRadialGradient(100,100,20,120,120,50);
    radial.addColorStop(0,'#EE84AA');
    radial.addColorStop(0.9,'#FF0188');  // 顏色值 #FF0188 == rgba(255,1,136,1)
    radial.addColorStop(1,'rgba(255,1,136,0)');

    c.fillStyle = radial;
    c.fillRect(0,0,500,500);

　　效果圖如下，這個立體的球形。

 

 

這個簡單的步驟中需要設置至少3個位置坐標和半徑，各種坐標和半徑組合會出現奇怪的形狀，什么時候會出現奇怪的形狀，怎么設置會出現我們想要的圓形呢？看下面試驗。

 

求解1：創建對象時，兩個圓的關系。

 

在以上基礎上，如果把創建對象代碼改為：

 radial = c.createRadialGradient(80,80,20,120,120,50);  //左邊效果圖

或

 radial = c.createRadialGradient(100,100,20,130,130,50);  // 右邊效果圖

效果圖，和圓形差的太遠了，倒是可以做箭頭效果。。。

　　

這個形狀怎么來的? 這時讓我想起一張twitter logo的圖片，大概是這樣。所以，輔助線走起來~

 

 

代碼恢復至正常球形效果，並添加輔助線后，代碼如下：

　　var c = document.getElementById('mycanvas').getContext('2d');

    var radial = c.createRadialGradient(100,100,20,120,120,50);
    radial.addColorStop(0,'#EE84AA');
    radial.addColorStop(0.9,'#FF0188');
    radial.addColorStop(1,'rgba(255,1,136,0)');

    c.fillStyle = radial;
    c.fillRect(0,0,500,500);

    //以下是添加的輔助線
    c.arc(100,100,20,0,2*Math.PI);
    c.moveTo(170,120);
    c.arc(120,120,50,0,2*Math.PI);
    c.stroke();

　效果圖：　

從效果圖可以看到起始圓完全在結束圓的包裹內。

改變起始圓和其對應輔助線的位置，代碼如下：

 

 var radial = c.createRadialGradient(80,80,20,120,120,50);
    radial.addColorStop(0,'#EE84AA');
    radial.addColorStop(0.9,'#FF0188');
    radial.addColorStop(1,'rgba(255,1,136,0)');

    c.fillStyle = radial;
    c.fillRect(0,0,500,500);

    //以下是添加的輔助線
    c.arc(80,80,20,0,2*Math.PI);
    c.moveTo(170,120);
    c.arc(120,120,50,0,2*Math.PI);
    c.stroke();

　效果圖：

　

在正常圓球基礎上，改變結束圓和其對應輔助線位置

var radial = c.createRadialGradient(100,100,20,130,130,50);
    radial.addColorStop(0,'#EE84AA');
    radial.addColorStop(0.9,'#FF0188');
    radial.addColorStop(1,'rgba(255,1,136,0)');

    c.fillStyle = radial;
    c.fillRect(0,0,500,500);

    //以下是添加的輔助線
    c.arc(100,100,20,0,2*Math.PI);
    c.moveTo(180,130);
    c.arc(130,130,50,0,2*Math.PI);
    c.stroke();

　效果圖：

　

現在再來看那些形狀就沒有那么奇怪了吧。

為了使效果更加明顯，在舉個栗子：

var radial = c.createRadialGradient(70,70,20,130,130,50);
    radial.addColorStop(0,'#EE84AA');
    radial.addColorStop(0.9,'#FF0188');
    radial.addColorStop(1,'rgba(255,1,136,0)');

    c.fillStyle = radial;
    c.fillRect(0,0,500,500);

    //以下是添加的輔助線
    c.arc(70,70,20,0,2*Math.PI);
    c.moveTo(180,130);
    c.arc(130,130,50,0,2*Math.PI);
    c.stroke();

　效果圖，so cute~

　

還有起始圓半徑大於結束圓半徑的情況，不再一一舉例。

根據上面效果可知，如果起始圓不在結束圓內，被渲染部分為兩個圓外切線和結束圓圍成的錐形。

若要成為圓形，需保證起始圓在結束圓內部。

 

另外，根據html規范知：

1， r0或r1為負數，會報錯。

2，若x0=x1, y0=y1, r0=r1，會跳過改步驟，不進行繪制。

 

求解二：漸變關系與繪制的圖形的關系

　

以上的問題被避免了，但是繪圖出現了這些形狀：

前兩個問題比較明顯，是被截斷的。如果告訴你第三個也是被截斷的，你會不會相信~

第三個的確是被截斷的，被圓形截斷的！

為什么會被截斷，就要說一下繪制圖形是的注意事項了~

解第一題過程中為了避免這個問題的干擾，設置了大大的着色區域c.fillRect(0,0,500,500); 

在正常圓球的基礎上，使繪制區域減小c.fillRect(0,0,500,150)，便出現第一種情況。

使寬度和高度均小於圓球區域c.fillRect(0,0,300,150)，便出現第二種情況。

若繪制形狀為圓形，當圓球在繪制范圍內，則顯示為正常球形，類似於題一中正常情況。

若圓球只有部分只繪制范圍內，便會出現上圖3的情況，如下代碼：

var radial = c.createRadialGradient(100,100,20,120,120,50);
    radial.addColorStop(0,'#EE84AA');
    radial.addColorStop(0.9,'#FF0188');
    radial.addColorStop(1,'rgba(255,1,136,0)');

    c.fillStyle = radial;
    c.arc(80,100,60,0,2*Math.PI);
    c.fill();

     //以下是添加的輔助線
    c.moveTo(170,120);
    c.arc(120,120,50,0,2*Math.PI);
    c.stroke();

　輔助線效果圖：

上面較大的圓為繪制區域，下面小點的是徑向漸變圓。着色區域是兩個圓相交的部分。

 

綜上述，使用canvasGradient畫一個正常的圓球效果，應遵循以下幾點：

1. createRadialGradient()方法中，起始圓半徑小於結束圓半徑。

2.起始圓完全在終止圓的范圍內

3.終止圓在繪制區域內

 

相關參考地址：

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient

https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-createradialgradient