水車(chē)_ ·描邊填充漸變顏色
1. 前言
我們已經(jīng)學(xué)習(xí)了描邊和填充單一顏色的方法，本小節(jié)我們將學(xué)習(xí)如何用漸變色描邊和填充圖形。
2. 什么是漸變色
開(kāi)始學(xué)習(xí)前，我們先了解一下什么是漸變色。漸變色是指顏色從明到暗，或由深轉(zhuǎn)淺，或是從一個(gè)色彩緩慢過(guò)渡到另一個(gè)色彩，充滿變幻無(wú)窮的神秘浪漫氣息的顏色。下面這張圖就是由漸變顏色完成的圖形。
3. 填充漸變色
在 canvas 中，關(guān)于漸變的類型有兩種：線性漸變和徑向漸變。線性漸變會(huì)創(chuàng)建一個(gè)從起點(diǎn)到終點(diǎn)的漸變面，這個(gè)漸變面上的色帶是垂直于漸變線的；徑向漸變會(huì)創(chuàng)建一個(gè)自中心點(diǎn)向外的放射狀顏色圈。
在 canvas 中創(chuàng)建一個(gè)漸變填充我們一般分為三個(gè)步驟：
- 創(chuàng)建漸變線；
- 設(shè)定漸變線關(guān)鍵點(diǎn)；
- 應(yīng)用漸變線。
接下來(lái)我們就開(kāi)始學(xué)習(xí) canvas 中漸變的實(shí)現(xiàn)。
3.1 線性漸變
我們先看一個(gè)案例，結(jié)合案例講解能更好地理解線性漸變。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網(wǎng)Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標(biāo)簽</canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.rect(10,10, 200,100)
let lg = ctx.createLinearGradient(0,0, 200,0) // 1. 創(chuàng)建漸變線
lg.addColorStop(0, "#f00") // 2. 設(shè)定關(guān)鍵點(diǎn)
lg.addColorStop(0.5, "#fff") // 2. 設(shè)定關(guān)鍵點(diǎn)
lg.addColorStop(1, "#000") // 2. 設(shè)定關(guān)鍵點(diǎn)
ctx.fillStyle = lg; // 3. 填充應(yīng)用漸變線
ctx.fill();
</script>
</body>
運(yùn)行結(jié)果：
我們將上面的例子拆分講解：
-
獲取canvas的渲染上下文。
const canvas = document.getElementById('imooc'); const ctx = canvas.getContext('2d'); -
繪制一個(gè)矩形路徑，左上角坐標(biāo)是 (10, 10)，長(zhǎng)度為 200px，寬度是 100px。
ctx.rect(10,10, 200,100) -
創(chuàng)建一條漸變線，起點(diǎn)是 （0, 0)，終點(diǎn)是 (200, 0)。
這里我們需要注意，這里的起點(diǎn)和終點(diǎn)是相對(duì)于整個(gè)畫(huà)布坐標(biāo)來(lái)講的，和創(chuàng)建的路徑是沒(méi)有關(guān)聯(lián)的。如果漸變線的范圍超出了繪制的路徑，則路徑外的漸變顏色是不會(huì)顯示的，如果漸變線的范圍不足以填滿繪制的路徑，則會(huì)用兩端的顏色填滿路徑。
let lg = ctx.createLinearGradient(0,0, 200,0) -
設(shè)定漸變的關(guān)鍵點(diǎn)。這里我們?cè)O(shè)定了三個(gè)關(guān)鍵點(diǎn)，這三個(gè)點(diǎn)設(shè)定了在這個(gè)位置的時(shí)候應(yīng)該顯示的顏色。
這里的0，0.5，1都是指漸變線的起點(diǎn)到終點(diǎn)的比例。
lg.addColorStop(0, "#f00") lg.addColorStop(0.5, "#fff") lg.addColorStop(1, "#000") -
將創(chuàng)建的漸變樣式賦值給填充屬性。
ctx.fillStyle = lg -
填充路徑。
ctx.fill()
到這里我們就給創(chuàng)建的路徑填充了一個(gè)漸變色。
用漸變色描邊和填充操作一樣，也是按上面講的三個(gè)步驟操作，我們看一個(gè)案例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網(wǎng)Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標(biāo)簽</canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.rect(10,10, 200,100)
let lg = ctx.createLinearGradient(0,0, 200,0) // 1. 創(chuàng)建線性漸變線
lg.addColorStop(0, "#f00") // 2. 設(shè)定關(guān)鍵點(diǎn)
lg.addColorStop(0.5, "#fff") // 2. 設(shè)定關(guān)鍵點(diǎn)
lg.addColorStop(1, "#000") // 2. 設(shè)定關(guān)鍵點(diǎn)
ctx.strokeStyle = lg; // 3. 填充線性漸變
ctx.stroke();
</script>
</body>
運(yùn)行結(jié)果：
我們可以看到描邊的樣式也是變成了漸變色。
3.2 徑向漸變
我們先看一個(gè)案例，結(jié)合案例講解能更好地理解徑向漸變。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網(wǎng)Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標(biāo)簽</canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.rect(0, 0, 150, 150)
let rg = ctx.createRadialGradient(75,75,0,75,75,70) // 1. 創(chuàng)建徑向漸變線
rg.addColorStop(0, "#f00") // 2. 設(shè)定關(guān)鍵點(diǎn)
rg.addColorStop(0.5, "#fff") // 2. 設(shè)定關(guān)鍵點(diǎn)
rg.addColorStop(1, "#000") // 2. 設(shè)定關(guān)鍵點(diǎn)
ctx.fillStyle = rg; // 3. 填充徑向漸變
ctx.fill();
</script>
</body>
運(yùn)行結(jié)果：
我們將上面的例子拆分講解：
-
獲取canvas的渲染上下文。
const canvas = document.getElementById('imooc'); const ctx = canvas.getContext('2d'); -
繪制一個(gè)正方形路徑，正方形的中心點(diǎn)坐標(biāo)是 (75, 75)。
ctx.rect(0, 0, 150, 150) -
創(chuàng)建一條徑向漸變線，起始圓心是 (75, 75)，起始半徑 r=0，結(jié)束圓心和起始圓心重合，也是 (75, 75)，結(jié)束半徑是70。
let rg = ctx.createRadialGradient(75,75,0,75,75,70) -
設(shè)定漸變的關(guān)鍵點(diǎn)，這里我們?cè)O(shè)定了三個(gè)關(guān)鍵點(diǎn)。
lg.addColorStop(0, "#f00") lg.addColorStop(0.5, "#fff") lg.addColorStop(1, "#000") -
將創(chuàng)建的漸變樣式賦值給填充屬性。
ctx.fillStyle = rg -
填充路徑。
ctx.fill()
到這里我們就給創(chuàng)建的路徑填充了一個(gè)徑向漸變色，使用徑向漸變色描邊我們類比線性漸變的寫(xiě)法，這里不再做說(shuō)明。
4. 方法整理
本小節(jié)中我們使用到三個(gè)新的方法 createLinearGradient()， createRadialGradient()和漸變對(duì)象 CanvasGradient 的方法 addColorStop()。
4.1 createLinearGradient()方法
createLinearGradient() 方法創(chuàng)建一個(gè)沿參數(shù)坐標(biāo)指定的直線的漸變，該方法返回一個(gè)線性 CanvasGradient 對(duì)象。
語(yǔ)法：
ctx.createLinearGradient(startX, startY, endX, endY);
變量說(shuō)明：
| 變量名 | 類型 | 是否必須 | 說(shuō)明 |
|---|---|---|---|
| startX | Number | 是 | 起點(diǎn)的 x 軸坐標(biāo)。 |
| startY | Number | 是 | 起點(diǎn)的 y 軸坐標(biāo)。 |
| endX | Number | 是 | 終點(diǎn)的 x 軸坐標(biāo)。 |
| endY | Number | 是 | 終點(diǎn)的 y 軸坐標(biāo)。 |
返回值：
CanvasGradient
一個(gè)根據(jù)指定線路初始化的線性漸變對(duì)象。
4.2 createRadialGradient()方法
createRadialGradient() 方法會(huì)依照參數(shù)確定兩個(gè)圓的坐標(biāo)，繪制放射性漸變，該方法返回 CanvasGradient 對(duì)象。
語(yǔ)法：
CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
變量說(shuō)明：
| 變量名 | 類型 | 是否必須 | 說(shuō)明 |
|---|---|---|---|
| x0 | Number | 是 | 開(kāi)始圓形的 x 軸坐標(biāo)。 |
| y0 | Number | 是 | 開(kāi)始圓形的 y 軸坐標(biāo)。 |
| r0 | Number | 是 | 開(kāi)始圓形的半徑。 |
| x1 | Number | 是 | 結(jié)束圓形的 x 軸坐標(biāo)。 |
| y1 | Number | 是 | 結(jié)束圓形的 y 軸坐標(biāo)。 |
| r1 | Number | 是 | 結(jié)束圓形的半徑。 |
返回值：
CanvasGradient
一個(gè)根據(jù)指定線路初始化的徑向漸變對(duì)象。
4.3 addColorStop()方法
addColorStop() 方法給漸變添加一個(gè)由偏移值和顏色值指定的斷點(diǎn)。如果偏移值不在0到1之間，將拋出錯(cuò)誤，如果顏色值不能被解析為有效的 CSS 顏色值 color，也將拋出錯(cuò)誤。
語(yǔ)法：
void gradient.addColorStop(offset, color);
變量說(shuō)明：
| 變量名 | 類型 | 是否必須 | 說(shuō)明 |
|---|---|---|---|
| offset | Number | 是 | 偏移值，0到1之間的值，超出范圍將拋出錯(cuò)誤。 |
| color | string | 是 | 顏色值。 |
5. 總結(jié)
本小節(jié)我們主要學(xué)習(xí)了如何利用漸變圖形對(duì)路徑填充或者描邊。漸變的內(nèi)容相對(duì)比較難理解，希望同學(xué)們能多多學(xué)習(xí)，特別是徑向漸變中的兩個(gè)圓的關(guān)系，這兩個(gè)圓的位置關(guān)系、大小關(guān)系不同，都會(huì)得到不同的圖形。
2025 imooc.com All Rights Reserved |