溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用canvas怎么實(shí)現(xiàn)一個(gè)線性漸變和徑向漸變效果

發(fā)布時(shí)間：2021-03-24 16:13:03 來源：億速云 閱讀：416 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)使用canvas怎么實(shí)現(xiàn)一個(gè)線性漸變和徑向漸變效果，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

fillStyle的第二種使用情況就是漸變色的填充。漸變色就分為線性漸變色和徑向漸變色。

線性漸變:大致分為兩步 這里又會(huì)使用到canvas的兩個(gè)新的函數(shù)。

第一步 : 使用一個(gè)新的函數(shù)createLinearGradient( xstart，ystart,xend,yend );var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend);

他有四個(gè)參數(shù)。分別為，xstart，ystart,xend,yend他們構(gòu)成兩個(gè)坐標(biāo)，這兩個(gè)坐標(biāo)構(gòu)成一個(gè)線段。這個(gè)線段實(shí)際上就是一個(gè)漸變線。漸變線用于定義漸變的方向和尺度。

第二步 : 就是在這個(gè)漸變線的基礎(chǔ)上添加colorStop,這個(gè)方法叫addColorStop(stop,color)。他有兩個(gè)參數(shù)分別為stop,color。第一個(gè)參數(shù)是一個(gè)浮點(diǎn)值用來決定關(guān)鍵色的位置。第二個(gè)參數(shù)是用來決定關(guān)鍵色的顏色。linearGrad.addColorStop(stop,color);

當(dāng)做完這兩步后這個(gè)linearGrad變量就可以作為fillStyle傳入這個(gè)屬性中。

看代碼:

<!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");  //獲取上下文繪圖環(huán)境

            var linearGrad = context.createLinearGradient(0, 0, 800, 600);   //漸變線的起始坐標(biāo)為(0,0)終止坐標(biāo)為(800,600)

            linearGrad.addColorStop(0.0, '#000');    //第一個(gè)參數(shù)表示關(guān)鍵顏色的位置0表示起始位置,1表示終點(diǎn)位置,第二個(gè)參數(shù)表示關(guān)鍵顏色的顏色。
            linearGrad.addColorStop(1.0, '#fff');


            context.fillStyle = linearGrad;
            context.fillRect(0, 0, 800, 600);

        } else {
            alert('您的瀏覽器不支持canvas,請(qǐng)更換瀏覽器嘗試~')
        }
    }
</script>

效果圖:

使用canvas怎么實(shí)現(xiàn)一個(gè)線性漸變和徑向漸變效果

當(dāng)我們創(chuàng)建好linearGrad這個(gè)變量后，我們是可以addColorStop是可以添加很多個(gè)的。

舉個(gè)例子:

代碼:

var linearGrad = context.createLinearGradient(0, 0, 800, 600);   //漸變線的起始坐標(biāo)為(0,0)終止坐標(biāo)為(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');

效果圖:

使用canvas怎么實(shí)現(xiàn)一個(gè)線性漸變和徑向漸變效果

還有我們定義的漸變線是傾斜的，我們也可以定義成水平的或者垂直的。我們只要修改一下漸變線的終止坐標(biāo)即可?？创a,做成水平的漸變色:

var linearGrad = context.createLinearGradient(0, 0, 800, 0);

效果圖:

使用canvas怎么實(shí)現(xiàn)一個(gè)線性漸變和徑向漸變效果

垂直的漸變色:

var linearGrad = context.createLinearGradient(0, 0, 800, 0);

效果圖:

使用canvas怎么實(shí)現(xiàn)一個(gè)線性漸變和徑向漸變效果

我們所做的不管傾斜的水平的還是垂直的，都是貫穿了整個(gè)畫布，那如果我們的漸變線只指定到了畫布的一部分會(huì)是什么效果呢？我們修改一下

var linearGrad = context.createLinearGradient(0, 0, 400, 300);

效果圖:

使用canvas怎么實(shí)現(xiàn)一個(gè)線性漸變和徑向漸變效果

同理我們所創(chuàng)建的漸變線也可以超過這個(gè)畫布的最大寬高。我們修改一下

var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);

效果圖:

使用canvas怎么實(shí)現(xiàn)一個(gè)線性漸變和徑向漸變效果

還有我們所繪制的填充的形狀也不一定占滿整個(gè)畫布的。我們可以任意調(diào)整自己定義的形狀。這個(gè)填充的形狀會(huì)在我們定義的漸變線上找到合適的填充色進(jìn)而填充出來。舉個(gè)例子:

var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);

效果圖:

使用canvas怎么實(shí)現(xiàn)一個(gè)線性漸變和徑向漸變效果

徑向漸變:與線性漸變的區(qū)別是，徑向漸變定義的是一個(gè)放射狀的漸變。而這個(gè)放射狀的漸變是定義在兩個(gè)同心圓的基礎(chǔ)上。而不像線性漸變是定義在兩點(diǎn)之間的。

徑向漸變也是需要兩步來完成。

第一步 : 使用一個(gè)新的函數(shù)createRadialGradient(x0,y0,r0,x1,y1,r1); 他有6個(gè)參數(shù)。前三個(gè)參數(shù)定義第一個(gè)圓環(huán)的坐標(biāo)和半徑，后三個(gè)參數(shù)定義第二個(gè)圓環(huán)的坐標(biāo)和半徑。整個(gè)徑向漸變就發(fā)生在這兩個(gè)圓之間。var radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

第二步 : 和線性漸變是一樣的，就不過多介紹。radialGrad.addColorStop(stop,color);

代碼和線性漸變的代碼十分類似。只不過這里使用的是createRadialGradient,我們給他傳入?yún)?shù)createRadialGradient(300,300,0,300,300,500),前三個(gè)參數(shù)定義的是在畫布中心，半徑為0的一個(gè)點(diǎn)。后三個(gè)參數(shù)定義的是在畫布中心半徑為500的一個(gè)大圓。這樣就定義了一個(gè)從一個(gè)點(diǎn)向外輻射的一個(gè)徑向漸變。看一下代碼

<!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,請(qǐng)更換瀏覽器嘗試~')
        }
    }

</script>

效果圖:

使用canvas怎么實(shí)現(xiàn)一個(gè)線性漸變和徑向漸變效果

以上就是使用canvas怎么實(shí)現(xiàn)一個(gè)線性漸變和徑向漸變效果，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手