[TOC]
## 線性漸變
語法：
```js
let gnt = cxt.createLinearGradient(x1, y1, x2, y2)
gnt.addColorStop(value1, color1)
gnt.addColorStop(value2, color2)
cxt.fillStyle = gnt
cxt.fill()
```
說明：在 Canvas 中，實現線性漸變有以下三個步驟
(1) 調用 createLinearGradient() 方法創建一個 linearGradient 對象，并賦值給變量 gnt
(2) 調用 linearGradient 對象的 addColorStop() 方法 N 次，第 1 次表示漸變開始的顏色，第 2 次表示漸變結束時的顏色。然后第 3 次則以第 2 次漸變顏色作為開始顏色，進行漸變，依此類推。
(3) 把 linearGradient 對象賦值給 fillStyle 屬性，并調用 fill() 方法來繪制有漸變色的圖形。
```
var gnt = cxt.createLinearGradient(x1, y1, x2, y2)
```
x1、y1 表示漸變色開始點的坐標，x2、y2 表示漸變色結束點的坐標，其有以下關系：
- 如果 y1 與 y2 相同，表示沿水平方向從左到右漸變
- 如果 x1 與 x2 相同，表示沿著垂直方向從左到右漸變
- 如果 x1 與 x2 不相同，且 y1 與 y2 也不相同，則表示漸變色沿著矩形對角線方向漸變
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漸變</title>
</head>
<body>
<canvas id="canvas" style="margin:0 auto; border: 1px solid gray"></canvas>
<script>
window.onload = function () {
let canvas = document.getElementById('canvas')
canvas.width = 600
canvas.height = 600
let context = canvas.getContext('2d')
let linearGrad = context.createLinearGradient(0,0,400,400) // 改變坐標來改變漸變方向
linearGrad.addColorStop(0,'white') // ColorStop 可以添加無數個,相當于一個中間狀態
linearGrad.addColorStop(0.25,'yellow') // 只能用小數不能用百分號...
linearGrad.addColorStop(0.5,'green')
linearGrad.addColorStop(0.75,'blue')
linearGrad.addColorStop(1,'black')
context.fillStyle = linearGrad
context.fillRect(0,0,800,800)
}
</script>
</body>
</html>
<!--
createLinearGradient(xstart,ystart,xend,yend) 漸變開始及結束的 x y 坐標 創建線性漸變
addColorStop(stop,color) 規定漸變對象中的顏色和停止位置
-->
```
下圖分別是橫向，縱向，對角的線型漸變的效果
## 陰影
| 屬性 | 說明 |
| --- | --- |
| shadowOffsetX | 陰影與圖形的水平距離，默認值為 0。大于 0 時向右偏移，小于 0 時向左偏移 |
| shadowOffsetY | 陰影與圖形的垂直距離，默認值為 0。大于 0 時向下偏移，小于 0 時向上偏移 |
| shadowColor | 陰影的顏色，默認為黑色 |
| shadowBlur | 陰影的模糊值，默認為 0。該值越大，模糊度越強 |
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width="1024" height="700" style="border: 1px solid gray; display: block; margin: 0 auto"></canvas>
<script>
window.onload = function(){
let cnv = document.getElementById('canvas')
let cxt = cnv.getContext('2d')
// 定義文字
const text = 'Canvas 陰影'
cxt.font = "bold 60px 微軟雅黑"
// 定義陰影
cxt.shadowOffsetX = 5
cxt.shadowOffsetY = 5
cxt.shadowColor = 'LightSkyBlue'
cxt.shadowBlur = 10
// 填充文字
cxt.fillStyle = 'HotPink'
cxt.fillText(text, 10, 90)
// 圖片陰影
let image = new Image()
image.src = './image.jpg'
image.onload = function () {
cxt.shadowOffsetX = 0
cxt.shadowOffsetY = 0
cxt.shadowColor = '#FF6666'
cxt.shadowBlur = 10
cxt.fillRect(10, 150, 500, 281)
cxt.drawImage(image, 10, 150)
}
}
</script>
</body>
</html>
```
