---
# System prepended metadata

title: 'Canvas - Note 3 : 顏色和線條'
tags: [DOM]

---

# Canvas - Note 3 : 顏色和線條
###### tags: `DOM`
## 一 . 顏色
### (一) . 顏色
1. 改變```fill()```塗色 ：改變fill時的顏色。
   - 方法 ： 改變```fillStyle```屬性。
2. 改變```stroke```塗色 ：改變stroke函式的顏色。   
   - 方法 ： 改變```strokeStyle```屬性。
3. 改變的變數方法 ： 
   - 顏色字串。
   - 16進位字串。
   - rgb字串(或rbga字串)。
```javascript=
// 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的座標為基準，向左或右延伸寬度。
  - 一般認為的 ： 中圖，為畫線軸左右延伸。
  - 實際處理的 ： 為右圖，想左或右延伸。 
![](https://i.imgur.com/dd7mZ9V.png =500x)
#### 2. ```lineCap ```
- 功用 ： 為線條尾端結束的方式。
- 有下列三種，可以改變尾端的形狀。
  - ```butt```  : 下圖第一個。
  - ```round```  : 下圖第二個。 
  - ```square```  : 下圖第三個。
![](https://i.imgur.com/Z138yBq.png =500x)
#### 3. ```lineJoin```
- 功用 ： 設定兩條線交疊的時候的形狀。
- 有下列三種，可以改變尾端的形狀。
  - ```round``` : 下圖第一個。
  - ```bevel``` : 下圖第二個。
  - ```miter``` : 下圖第三個。 
![](https://i.imgur.com/qBCBtMH.png =500x)


## 三 . 顏色梯度
### (一) . 線性梯度
#### 1. 建造設定
- 函式 ： ```createLinearGradient(x1, y1, x2, y3)```。
- 參數 ： 
  - x1和y1 : 渲染點在畫布的開始座標。
  - x2和y2 : 渲染點在畫布的終止座標。
![](https://i.imgur.com/0b5SF74.png =350x)
#### 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物件的參數。
![](https://i.imgur.com/QHovuTL.png =500x)