**章節**
[TOC]
## 1. 色彩樣式
canvas提供了兩個色彩屬性
設置圖形的填充顏色。
```
fillStyle = color
```
設置圖形輪廓的顏色。
```
strokeStyle = color
```
color 可以是表示 CSS 顏色值的字符串，漸變對象或者圖案對象。后面我們會詳細漸變和圖案對象。默認情況下，線條和填充顏色都是黑色（CSS 顏色值 `#000000`）。
注意: 一旦您設置了 `strokeStyle` 或者 `fillStyle` 的值，那么這個新值就會成為新繪制的圖形的默認值。如果你要給每個圖形上不同的顏色，你需要重新設置 `fillStyle` 或 `strokeStyle` 的值。
實例：canvas-demo/fillStyle.html：
```
<canvas id="canvas" width="400" height="300">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
for (var i=1;i<6;i++){
for (var j=1;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
</script>
```
## 2. 透明度
`globalAlpha`屬性用來設置圖形和圖片透明度的屬性。 數值的范圍從 0.0 （完全透明）到1.0 （完全不透明）。
實例：canvas-demo/globalAlpha：
```
<canvas id="canvas" width="400" height="300">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx = canvas.getContext('2d');
ctx.fillRect(10,10, 50,50);
ctx.globalAlpha = 0.5;
ctx.fillRect(80,80, 50,50);
</script>
```
## 3. 線型的樣式
**3.1 設置線條寬度**
```
lineWidth = value
```
實例：canvas-demo/lineWidth.html：
```
<canvas id="canvas" width="600" height="400">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
ctx.strokeStyle="#e78170";
for (var i = 0; i < 10; i++){
ctx.lineWidth = 1+i;
ctx.beginPath();
ctx.moveTo(25+i*14,25);
ctx.lineTo(25+i*14,140);
ctx.stroke();
}
</script>
```
**3.2 設置線條末端樣式**
```
lineCap = type
```
有三個值：
- butt 線段末端以方形結束。
- round 線段末端以圓形結束。
- square 線段末端以方形結束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區域。
實例：canvas-demo/lineCap.html：
```
<canvas id="canvas" width="600" height="400">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
ctx.lineCap ='butt';
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(110,10);
ctx.lineTo(210,10);
ctx.stroke();
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(110,70);
ctx.lineTo(210,70);
ctx.stroke();
ctx.lineCap = 'square';
ctx.beginPath();
ctx.moveTo(110,140);
ctx.lineTo(210,140);
ctx.stroke();
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(110, 0);
ctx.lineTo(110, 150);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(210, 0);
ctx.lineTo(210, 150);
ctx.stroke();
</script>
```
**3.3 設定線條與線條間接合處的樣式**
```
lineJoin = type
```
此屬性有3個值： round, bevel and miter。默認值是 miter。
- round 通過填充一個額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。 圓角的半徑是線段的寬度。
- bevel 在相連部分的末端填充一個額外的以三角形為底的區域， 每個部分都有各自獨立的矩形拐角。
- miter 通過延伸相連部分的外邊緣，使其相交于一點，形成一個額外的菱形區域。這個設置可以通過 miterLimit 屬性看到效果 .
實例：canvas-demo/lineJoni.html：
```
<canvas id="canvas" width="600" height="400">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
ctx.lineJoin ='round';
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(110,10);
ctx.lineTo(210,10);
ctx.lineTo(210, 40);
ctx.stroke();
ctx.lineJoin = 'bevel';
ctx.beginPath();
ctx.moveTo(110,70);
ctx.lineTo(210,70);
ctx.lineTo(210, 100);
ctx.stroke();
ctx.lineJoin = 'miter';
ctx.beginPath();
ctx.moveTo(110,140);
ctx.lineTo(210,140);
ctx.lineTo(210, 170);
ctx.stroke();
</script>
```
注意：如果2個相連部分在同一方向，那么lineJoin不會產生任何效果，因為在那種情況下不會出現連接區域。
**(1) miterLimit**
限制當兩條線相交時交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內角頂點到外角頂點的長度。
```
miterLimit = value
```
**(3) setLineDash()**
設置虛線。
```
setLineDash(segments)
```
- segments：一個Array數組。一組描述交替繪制線段和間距（坐標空間單位）長度的數字。 如果數組元素的數量是奇數， 數組的元素會被復制并重復。例如， [5, 15, 25] 會變成 [5, 15, 25, 5, 15, 25]。
**(3) lineDashOffset**
設置虛線樣式的起始偏移量。
```
lineDashOffset = value
```
**(4) getLineDash()**
返回一個包含當前虛線樣式，長度為非負偶數的數組。
```
getLineDash()
```
## 4. 漸變Gradients
我們還可以用線性或者徑向的漸變來填充或描邊
**線性漸變**
```
createLinearGradient(x1, y1, x2, y2)
```
`createLinearGradient` 方法接受 4 個參數，表示漸變的起點 (x1,y1) 與終點 (x2,y2)。
**徑向漸變**
```
createRadialGradient(x1, y1, r1, x2, y2, r2)
```
`createRadialGradient` 方法接受 6 個參數，前三個定義一個以 (x1,y1) 為原點，半徑為 r1 的圓，后三個參數則定義另一個以 (x2,y2) 為原點，半徑為 r2 的圓。
創建出` canvasGradient `對象后，我們就可以用 `addColorStop` 方法給它上色了。
```
gradient.addColorStop(position, color)
```
`addColorStop` 方法接受 2 個參數，position 參數必須是一個 0.0 與 1.0 之間的數值，表示漸變中顏色所在的相對位置。例如，0.5 表示顏色會出現在正中間。color 參數必須是一個有效的 CSS 顏色值（如 #FFF， rgba(0,0,0,1)，等等）。
```
var linearGradient=cxt.createLinearGradient(50,50,250,250);
linearGradient.addColorStop(0,'yellow');
linearGradient.addColorStop(.5,'red');
linearGradient.addColorStop(1,'green');
cxt.fillStyle=linearGradient;
cxt.fillRect(50,50,200,200);
```
從上圖看，（50,50）是漸變的起點，（250，250）是漸變的終點，而連接這兩點的白線，就是漸變的方向。
**同心漸變**
```
var rr=cxt.createRadialGradient(100,100,40,100,100,100);
rr.addColorStop(0,'red');
rr.addColorStop(.5,'yellow');
rr.addColorStop(1,'blue');
cxt.fillStyle=rr;
cxt.fillRect(20,20,160,160);
cxt.fill();
```
不同心但外圓包含內圓
```
var rr2=cxt.createRadialGradient(250,250,20,260,260,50);
rr2.addColorStop(0,'red');
rr2.addColorStop(.5,'yellow');
rr2.addColorStop(1,'blue');
cxt.fillStyle=rr2;
cxt.fillRect(50,50,400,400);
cxt.fill();
```
不同心，外圓內圓分離
```
var rr3=cxt.createRadialGradient(250,250,30,350,250,50);
rr3.addColorStop(0,'red');
rr3.addColorStop(.8,'yellow');
rr3.addColorStop(1,'blue');
cxt.fillStyle=rr3;
cxt.fillRect(100,100,300,300);
```
## 5. 圖案樣式 Patterns
createPattern(image, type) 該方法接受兩個參數。Image 可以是一個 Image 對象的引用，或者另一個 canvas 對象。Type 必須是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。
例子：
```
var img=new Image();
img.src="diamond.png";
img.onload=function(){
var ptrn=cxt.createPattern(img,'repeat');
cxt.fillStyle=ptrn;
cxt.fillRect(250,250,80,80);
}
```
注意：使用 Image 對象的 onload handler 來確保設置圖案之前圖像已經裝載完畢。
## 6. 陰影 Shadows
- shadowOffsetX = float shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認都為 0。
- shadowOffsetY = float shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認都為 0。
- shadowBlur = float shadowBlur 用于設定陰影的模糊程度，其數值并不跟像素數量掛鉤，也不受變換矩陣的影響，默認為 0。
- shadowColor = color shadowColor 是標準的 CSS 顏色值，用于設定陰影顏色效果，默認是全透明的黑色。
例子：
```
var img=new Image();
img.src="mm.jpg";
img.onload=function(){
cxt.shadowOffsetX=10;
cxt.shadowOffsetY=10;
cxt.shadowBlur=8;
cxt.shadowColor="#333";
cxt.drawImage(img,10,10);
}
```
## 7. Canvas 填充規則
當我們用到 fill（或者 clip和isPointinPath ）你可以選擇一個填充規則，該填充規則根據某處在路徑的外面或者里面來決定該處是否被填充，這對于自己與自己路徑相交或者路徑被嵌套的時候是有用的。
兩個可能的值： "nonzero": 默認值. "evenodd":
```
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.arc(100,100,20,0,Math.PI*2,true);
cxt.fill("evenodd");
```
