fillStyle的第二個使用情況就是漸層色的填滿。漸層色就分為線性漸層色和徑向漸層色。
線性漸層:大致分為兩步驟這裡又會使用到canvas的兩個新的函數。
第一步: 使用一個新的函數createLinearGradient( xstart，ystart,xend,yend );var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend);
他有四個參數。分別為，xstart，ystart,xend,yend他們構成兩個座標，這兩個座標構成一個線段。這個線段其實就是一個漸層線。漸變線用於定義漸變的方向和尺度。
第二步: 就是在這個漸層線的基礎上加上colorStop,這個方法叫addColorStop(stop,color)。他有兩個參數分別為stop,color。第一個參數是一個浮點數值用來決定關鍵色的位置。第二個參數是用來決定關鍵色的顏色。 linearGrad.addColorStop(stop,color);
當做完這兩步驟後這個linearGrad變數就可以當作fillStyle傳入這個屬性中。
看代碼:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>線性漸變</title></head><body> <canvas id=canvas style=border: 1px solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas); canvas.width = 800; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); //取得上下文繪圖環境var linearGrad = context.createLinearGradient(0, 0, 800, 600); //漸變線的起始座標為(0,0)終止座標為(800,600) linearGrad .addColorStop(0.0, '#000'); //第一個參數表示關鍵顏色的位置0表示起始位置,1表示終點位置,第二個參數表示關鍵顏色的顏色。 linearGrad.addColorStop(1.0, '#fff'); context.fillStyle = linearGrad; context.fillRect(0, 0, 800, 600); } else { alert('您的瀏覽器不支援canvas,請更換瀏覽器嘗試~') } }</script>效果圖:
當我們創建好linearGrad這個變數後，我們是可以addColorStop是可以添加很多個的。
舉個例子:
代碼:
var linearGrad = context.createLinearGradient(0, 0, 800, 600); //漸變線的起始座標為(0,0)終止座標為(800,600) linearGrad.addColorStop(0.0, '#fff'); linearGrad. addColorStop(0.25, '#FB3'); linearGrad.addColorStop(0.5, '#690'); linearGrad.addColorStop(0.75, '#09C'); linearGrad.addColorStop(1.0, '#000');
效果圖:
還有我們定義的漸層線是傾斜的，我們也可以定義成水平的或垂直的。我們只要修改一下漸層線的終止座標即可。看代碼,做成水平的漸層色:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
效果圖:
垂直的漸層色:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
效果圖:
我們所做的不管傾斜的水平的還是垂直的，都是貫穿了整個畫布，那如果我們的漸變線只指定到了畫布的一部分會是什麼效果呢？讓我們修改一下
var linearGrad = context.createLinearGradient(0, 0, 400, 300);
效果圖:
同理我們所創造的漸變線也可以超過這個畫布的最大寬高。讓我們修改一下
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);
效果圖:
還有我們所繪製的填充的形狀也不一定佔滿整個畫布的。我們可以任意調整自己定義的形狀。這個填滿的形狀會在我們定義的漸進式線上找到合適的填滿色進而填滿出來。舉個例子:
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);
效果圖:
徑向漸層:與線性漸變的差別是，徑向漸層定義的是一個放射狀的漸層。而這個放射狀的漸變是定義在兩個同心圓的基礎上。而不像線性漸變是定義在兩點之間的。
徑向漸層也是需要兩個步驟來完成。
第一步: 使用新的函數createRadialGradient(x0,y0,r0,x1,y1,r1); 他有6個參數。前三個參數定義第一個圓環的座標和半徑，後三個參數定義第二個圓環的座標和半徑。整個徑向漸層就發生在這兩個圓之間。 var radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
第二步: 和線性漸層是一樣的，就不過多介紹。 radialGrad.addColorStop(stop,color);
程式碼和線性漸層的程式碼十分類似。只不過這裡使用的是createRadialGradient,我們給他傳入參數createRadialGradient(300,300,0,300,300,500),前三個參數定義的是在畫布中心，半徑為0的一個點。後三個參數定義的是在畫布中心半徑為500的一個大圓。這樣就定義了一個從一個點向外輻射的一個徑向漸層。看一下程式碼
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>徑向漸層</title></head><body> <canvas id=canvas style=border: 1px solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas) ; canvas.width = 600; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); var radialGrad = context.createRadialGradient(300, 300, 0, 300, 300, 500); radialGrad.addColorStop(0.0, '#fff'); '); radialGrad.addColorStop(0.5, '#690'); radialGrad.addColorStop(0.75, '#09C'); radialGrad.addColorStop(1.0, '#000'); context.fillStyle = radialGrad; context.fillRect; 600, 600); } else { alert('您的瀏覽器不支援canvas,請更換瀏覽器嘗試~') } }</script>效果圖:
大家可以試著改變參數來看看會有什麼不同的效果。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。