# Canvas - Note 3 : 顏色和線條
###### tags: `DOM`
## 一 . 顏色
### (一) . 顏色
1. 改變```fill()```塗色 ：改變fill時的顏色。
- 方法 ： 改變```fillStyle```屬性。
2. 改變```stroke```塗色 ：改變stroke函式的顏色。
- 方法 ： 改變```strokeStyle```屬性。
3. 改變的變數方法 ：
- 顏色字串。
- 16進位字串。
- rgb字串(或rbga字串)。

// these all set the fillStyle to 'orange'

ctx.fillStyle = 'orange';
ctx.fillStyle = '#FFA500';
ctx.fillStyle = 'rgb(255, 165, 0)';
ctx.fillStyle = 'rgba(255, 165, 0, 1)';

### (二) . 透明度
1. 用rgba改變 ： 由設定```fillStyle```或```strokeStyle```的rgba去改變透明度。
2. 用全域的方法改變 ： 由設定```gobalAlpha```去改變整個```ctx```物件的透明度。

## 二 . 線條
### (一) . 線條基本
#### 1. ```lineWidth```
- 功用 ： 設定線的寬度，default是1，所以注意不要設定低於1了。
- canvas的寬度原理 ： 是以lineTo的座標為基準，向左或右延伸寬度。
- 一般認為的 ： 中圖，為畫線軸左右延伸。
- 實際處理的 ： 為右圖，想左或右延伸。
#### 2. ```lineCap ```
- 功用 ： 為線條尾端結束的方式。
- 有下列三種，可以改變尾端的形狀。
- ```butt``` : 下圖第一個。
- ```round``` : 下圖第二個。
- ```square``` : 下圖第三個。
#### 3. ```lineJoin```
- 功用 ： 設定兩條線交疊的時候的形狀。
- 有下列三種，可以改變尾端的形狀。
- ```round``` : 下圖第一個。
- ```bevel``` : 下圖第二個。
- ```miter``` : 下圖第三個。

## 三 . 顏色梯度
### (一) . 線性梯度
#### 1. 建造設定
- 函式 ： ```createLinearGradient(x1, y1, x2, y3)```。
- 參數 ：
- x1和y1 : 渲染點在畫布的開始座標。
- x2和y2 : 渲染點在畫布的終止座標。
#### 2. 加入顏色
- 函式 ： ```addColorStop(offset, color)```。
- 參數 ：
- ```offset``` :由0到1，0代表(x1,y1)，1代表(x2,y2)。
- ```color``` : 對應到css顏色。
- 可以加入多個color。
#### 3. 設定渲染顏色
- 方法 ： 可以在```fillstyle```和```fillstroke```設定。
- 此時渲染的顏色就會變成設定的漸層。
- 注意 ： 加入渲染時，會渲染整個canvas，只是在x1,y1後的顏色都會被最後一個顏色取代，x2,y2同理。
- 所以概念就是渲染一個整個，選一部分出來。
### (二) . 放射梯度
1. 概念基本上同線性 ： 除了第一個建構函示不一樣
2. 建構函示 ： ```createRadialGradient(x0, y0, r0, x1, y1, r1)```
- x0, y0, r0 : 第一個圓(內圓)需要的參數。
- x1, y1, r1 : 第二個圓(外圓)需要的參數
3. 例子 ：
- 建構函式 ： 可以看出中間有兩個圓。
- 加入顏色 ： 注意，這時的offset為1為外圈外的顏色。
- 使用顏色 ： 同線性，設定ctx物件的參數。