藝術(shù)離不開色彩伦仍，今天咱們來介紹一下填充顏色结窘，體會(huì)一下色彩的魅力。
填充顏色主要分為兩種：
- 基本顏色
- 漸變顏色（又分為線性漸變與徑向漸變）
我們一個(gè)個(gè)來看充蓝。
填充基本顏色
Canvas fillStyle屬性用來設(shè)置畫布上形狀的基本顏色和填充隧枫。fillStyle使用簡單的顏色名稱。這看起來非常簡單谓苟，例如:
context.fillStyle = "red";
下面是出自 HTML4 規(guī)范的可用顏色字符串值列表官脓，共十六個(gè)。由于 HTML5 沒有修改專屬的顏色涝焙，HTML4 的顏色都可以在 HTML5 中正確顯示卑笨。
| 名稱 | 名稱字符串 | 十六進(jìn)制數(shù)字字符串 |
|---|---|---|
| 黑色 | Black | #000000s |
| 綠色 | Green | #008000 |
| 銀色 | Silver | #C0C0C0 |
| 石灰色 | Lime | #00FF00 |
| 灰色 | Gray | #808080 |
| 橄欖色 | Olive | #808000 |
| 白色 | White | #FFFFFF |
| 黃色 | Yellow | #FFFF00 |
| 栗色 | Maroon | #800000 |
| 海藍(lán)色 | Navy | #000080 |
| 紅色 | Red | #FF0000 |
| 藍(lán)色 | Blue | #0000FF |
| 紫色 | Purple | #800080 |
| 深藍(lán)綠色 | Teal | #008080 |
| 紫紅色 | Fuchsia | #FF00FF |
| 淺藍(lán)綠色 | Aqua | #00FFFF |
所有這些顏色值都可以應(yīng)用到 strokeStyle 屬性和 fillStyle 屬性中。
好了仑撞，我來總結(jié)一下填充基本色的方法：（也可用于strokeStyle屬性）
（1） 使用顏色字符串填充赤兴。
context.fillStyle = "red";
（2）使用十六進(jìn)制數(shù)字字符串填充。
context.fillStyle = "#FF0000";
（3）使用十六進(jìn)制數(shù)字字符串簡寫形式填充隧哮。
context.fillStyle = "#F00";
（4）使用rgb()方法設(shè)置顏色桶良。
context.fillStyle = "rgb(255,0,0)";
（5）使用rgba()方法設(shè)置顏色。
context.fillStyle = "rgba(255,0,0,1)";
此方法最后一個(gè)參數(shù)傳遞的是alpha值沮翔，透明度范圍為1（不透明）~0（透明）艺普。
（6）使用hsl()方法設(shè)置顏色。
context.fillStyle = "hsl(0,100%,50%)";
HSL即是代表色相（H）鉴竭，飽和度（S），明度（L）三個(gè)通道的顏色岸浑。
（7）使用hsla()方法設(shè)置顏色搏存。
context.fillStyle = "hsla(0,100%,50%,1)";
以上7句代碼都是填充"#FF0000"這個(gè)紅色。
填充漸變形狀
在畫布上創(chuàng)建漸變填充有兩個(gè)基本選項(xiàng)：線性或徑向矢洲。線性漸變創(chuàng)建一個(gè)水平璧眠、垂直或者對角線的填充圖案。徑向漸變自中心點(diǎn)創(chuàng)建一個(gè)放射狀填充读虏。填充漸變形狀分為三步：添加漸變線责静，為漸變線添加關(guān)鍵色，應(yīng)用漸變盖桥。下面是它們的一些示例灾螃。
線性漸變
三步走戰(zhàn)略：
- 添加漸變線：
var grd = context.createLinearGradient(xstart,ystart,xend,yend);
- 為漸變線添加關(guān)鍵色(類似于顏色斷點(diǎn))：
grd.addColorStop(stop,color);
這里的stop傳遞的是 0 ~ 1 的浮點(diǎn)數(shù)，代表斷點(diǎn)到(xstart,ystart)的距離占整個(gè)漸變色長度是比例揩徊。
- 應(yīng)用漸變：
context.fillStyle = grd;
context.strokeStyle = grd;
寫個(gè)代碼來看看腰鬼。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>填充線性漸變</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas嵌赠？！趕快換一個(gè)吧Ｏㄉ摹姜挺！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.rect(200,100,400,400);
//添加漸變線
var grd = context.createLinearGradient(200,300,600,300);
//添加顏色斷點(diǎn)
grd.addColorStop(0,"black");
grd.addColorStop(0.5,"white");
grd.addColorStop(1,"black");
//應(yīng)用漸變
context.fillStyle = grd;
context.fill();
}
</script>
</body>
</html>
運(yùn)行結(jié)果：
我覺得有必要做一個(gè)圖解，方便大家一次性理解漸變彼硫。
為了方便理解炊豪，建議把漸變線看成是一個(gè)有向線段。如果熟悉PS等繪圖工具拧篮，用過其中的漸變色設(shè)置词渤，應(yīng)該會(huì)很好理解。
這里漸變線的起點(diǎn)和終點(diǎn)不一定要在圖像內(nèi)他托，顏色斷點(diǎn)的位置也是一樣的掖肋。但是如果圖像的范圍大于漸變線，那么在漸變線范圍之外赏参，就會(huì)自動(dòng)填充離端點(diǎn)最近的斷點(diǎn)的顏色志笼。
這里配合兩個(gè)補(bǔ)充函數(shù)再舉一例。
繪制矩形的快捷方法
fillRect(x,y,width,height)把篓、stroke(x,y,width,height)纫溃。這兩個(gè)函數(shù)可以分別看做rect()與fill()以及rect()與stroke()的組合。因?yàn)?code>rect()僅僅只是規(guī)劃路徑而已韧掩，而這兩個(gè)方法確實(shí)實(shí)實(shí)在在的繪制紊浩。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>填充線性漸變</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas？疗锐！趕快換一個(gè)吧７凰！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
//添加漸變線
var grd = context.createLinearGradient(100,300,700,300);
//添加顏色斷點(diǎn)
grd.addColorStop(0,"olive");
grd.addColorStop(0.25,"maroon");
grd.addColorStop(0.5,"aqua");
grd.addColorStop(0.75,"fuchsia");
grd.addColorStop(0.25,"teal");
//應(yīng)用漸變
context.fillStyle = grd;
context.strokeStyle = grd;
context.strokeRect(200,50,300,50);
context.strokeRect(200,100,150,50);
context.strokeRect(200,150,450,50);
context.fillRect(200,300,300,50);
context.fillRect(200,350,150,50);
context.fillRect(200,400,450,50);
context.fillRect(0,550,800,25);
}
</script>
</body>
</html>
運(yùn)行結(jié)果：
這兩個(gè)頁面都是水平漸變滑臊，但是要清楚線性漸變不一定是水平的口芍，方向可以是任意的，通過漸變線的端點(diǎn)來設(shè)置方向雇卷。
徑向漸變
同樣是三步走戰(zhàn)略鬓椭，只不過是第一步的所用方法變了。
- 添加漸變圓：
var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
- 為漸變線添加關(guān)鍵色(類似于顏色斷點(diǎn))：
grd.addColorStop(stop,color);
- 應(yīng)用漸變：
context.fillStyle = grd;
context.strokeStyle = grd;
線性漸變是基于兩個(gè)端點(diǎn)定義的关划，但是徑向漸變是基于兩個(gè)圓定義的小染。
我們把示例7-2改寫一下。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>填充徑向漸變</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas贮折？裤翩！趕快換一個(gè)吧！调榄！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
//添加漸變線
var grd = context.createRadialGradient(400,300,100,400,300,200);
//添加顏色斷點(diǎn)
grd.addColorStop(0,"olive");
grd.addColorStop(0.25,"maroon");
grd.addColorStop(0.5,"aqua");
grd.addColorStop(0.75,"fuchsia");
grd.addColorStop(0.25,"teal");
//應(yīng)用漸變
context.fillStyle = grd;
context.fillRect(100,100,600,400);
}
</script>
</body>
</html>
運(yùn)行結(jié)果：
怎么感覺這個(gè)顏色搭配那么的……算了岛都，這個(gè)就叫做藝術(shù)律姨。
createRadialGradient(x0,y0,r0,x1,y1,r1);方法規(guī)定了徑向漸變開始和結(jié)束的范圍，即兩圓之間的漸變臼疫。
總結(jié)一下择份，這節(jié)課我們學(xué)習(xí)了fillStyle、createLinearGradient()烫堤、createRadialGradient()荣赶、addColorStop()、fillRect()鸽斟、strokeRect()等屬性和方法拔创，詳細(xì)介紹了填充基本色、線性漸變富蓄、徑向漸變剩燥。
好了，現(xiàn)在學(xué)會(huì)了上色立倍，那么盡情的使用色彩灭红，繪制出屬于我們自己的藝術(shù)品吧！??
如果您喜歡本書口注，請使用支付寶掃描下面的二維碼捐助作者变擒。
謝謝您的支持！也歡迎您訂閱本書。
如果書中有疏漏或錯(cuò)誤之處，敬請您指出颠悬，期待您的pull request。如果有任何疑問也可以發(fā)送issue券册。
本人郵箱：airing@ursb.me
本人博客：http://ursb.me
本書地址：http://airingursb.gitbooks.io/canvas
本書github：http://github.com/airingursb/canvas
