使用canvas來完成線性漸變和徑向漸變的功能

溢楊年華發表於2019-07-25
Canvas
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, 0, 600);

 

效果圖:
我們所做的不管傾斜的水平的還是垂直的，都是貫穿了整個畫布，那如果我們的漸變線只指定到了畫布的一部分會是什麼效果呢？
我們修改一下
var linearGrad = context.createLinearGradient(0, 0, 400, 300);

 

效果圖:

同理我們所建立的漸變線也可以超過這個畫布的最大寬高。我們修改一下
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);

 

效果圖:
 
還有我們所繪製的填充的形狀也不一定佔滿整個畫布的。我們可以任意調整自己定義的形狀。這個填充的形狀會在我們定義的漸變線上找到合適的填充色進而填充出來。舉個例子:
context.fillRect(200, 200, 600, 400);

 

效果圖:
 
 
 
徑向漸變 :與線性漸變的區別是，徑向漸變定義的是一個放射狀的漸變。而這個放射狀的漸變是定義在兩個同心圓的基礎上。而不像線性漸變是定義在兩點之間的。
徑向漸變也是需要兩步來完成。
 
第一步 : 使用一個新的函式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.25, '#FB3');
            radialGrad.addColorStop(0.5, '#690');
            radialGrad.addColorStop(0.75, '#09C');
            radialGrad.addColorStop(1.0, '#000');

            context.fillStyle = radialGrad;
            context.fillRect(0, 0, 600, 600);

        } else {
            alert('您的瀏覽器不支援canvas,請更換瀏覽器嘗試~')
        }
    }

</script>

 

效果圖:
 
 
大家可以試著改變一下引數來看看會有什麼不同的效果。
 
 
 

相關文章