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/createRadialGradienthttps://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-createradialgradient

 

 

canvas放射狀漸層詳解