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