1.fillStyle 和 strokeStyle屬性
如果想要給圖形上色，有兩個重要的屬性可以做到：
fillStyle和strokeStyle。這兩個屬性的定義方法如下所示。
fillStyle = color
strokeStyle = color
strokeStyle是用於設置圖形輪廓的顏色，而fillStyle用於設置填充顏色。color可以是表示 CSS 顏色值的字符串、漸變對象或者圖案對象。默認情況下，線條和填充顏色都是黑色(CSS 顏色值 #000000)。這裏需要注意的是如果自定義顏色則應該保證輸入符合 CSS顏色值標準的有效字符串。下面的代碼都是符合標準的顏色表示方式，都表示同一種顏色（橙色）。
context.fillStyle = "orange";
context.fillStyle = "#FFA500";
context.fillStyle = "rgb(255,165,0)";
context.fillStyle = "rgba(255,165,0,1)";
2.透明度 globalAlpha
通過設置 globalAlpha屬性或者使用一個半透明顏色作爲輪廓或填充的樣式來繪製透明或半透明的圖形。globalAlpha屬性定義代碼如下所示：
globalAlpha = transparency value這個屬性影響到canvas裏所有圖形的透明度，其有效的值範圍是
0.0 （完全透明）到 1.0（完全不透明），默認是 1.0。
globalAlpha屬性在需要繪製大量擁有相同透明度的圖形時相當高效。
下面通過一個示例來了解一下globalAlpha屬性的應用。本例中用四色格作爲背景，設置 globalAlpha 爲 0.3後，在上面畫一系列半徑遞增的半透明圓。最終結果是一個徑向漸變效果。圓疊加得越更多，原先所畫的圓的透明度會越低。通過增加循環次數，畫更多的圓，背景圖的中心部分會完全消失。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>globalAlpha 屬性</title>
<script >
function draw(id) {
var context = document.getElementById('canvas').getContext('2d');
context.fillStyle = '#FD0';
context.fillRect(0,0,75,75);
context.fillStyle = '#6C0';
context.fillRect(75,0,75,75);
context.fillStyle = '#09F';
context.fillRect(0,75,75,75);
context.fillStyle = '#F30';
context.fillRect(75,75,75,75);
context.fillStyle = '#FFF';
context.globalAlpha = 0.3;
for (var i=0;i<7;i ){
context.beginPath();
context.arc(75,75,10 10*i,0,Math.PI*2,true);
context.fill();
}
}
</script>
</head>
<body οnlοad="draw('canvas');">
<h1>globalAlpha 屬性實例</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>
3.線型 Line styles
線型包括如下屬性：
lineWidth = value
lineCap = type
lineJoin = type
miterLimit = value
通過這些屬性來設置線的樣式。下面將結合實例來講解一下各屬性的應用及應用後的效果。
lineWidth屬性
該屬性設置當前繪線的粗細，屬性值必須爲正數。默認值是1.0。線寬是指給定路徑的中心到兩邊的粗細。換句話說就是在路徑的兩邊各繪製線寬的一半。因爲畫布的座標並不和像素直接對應，當需要獲得精確的水平或垂直線的時候要特別注意。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>lineWidth屬性</title>
<script >
function draw(id) {
var context = document.getElementById('canvas').getContext('2d');
for (var i = 0; i < 10; i ){
context.lineWidth = 1 i;
context.beginPath();
context.strokeStyle = '#c00';
context.moveTo(5 i*14,5);
context.lineTo(5 i*14,140);
context.stroke();
}
}
</script>
</head>
<body οnlοad="draw('canvas');">
<h1>lineWidth 屬性實例</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>
lineCap 屬性
該屬性決定了線段端點顯示的樣子。它可以爲下面的三種值之一：butt，round 和 square，默認是 butt。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>lineCap屬性</title>
<script >
function draw(id) {
var context = document.getElementById('canvas').getContext('2d');
var lineCap = ['butt','round','square'];
context.strokeStyle = '#09f';
context.beginPath();
context.moveTo(10,10);
context.lineTo(140,10);
context.moveTo(10,140);
context.lineTo(140,140);
context.stroke();
context.strokeStyle = 'black';
for (var i=0;i<lineCap.length;i ){
context.lineWidth = 15;
context.lineCap = lineCap[i];
context.beginPath();
context.moveTo(25 i*50,10);
context.lineTo(25 i*50,140);
context.stroke();
}
}
</script>
</head>
<body οnlοad="draw('canvas');">
<h1>lineCap屬性實例</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>
lineJoin 屬性
該屬性值決定了圖形中兩線段連接處所顯示的樣子。它可以是以下三種值之一：round, bevel 和 miter。默認是 miter。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>lineJoin屬性</title>
<script >
function draw(id) {
var context = document.getElementById('canvas').getContext('2d');
var lineJoin = ['round','bevel','miter'];
context.strokeStyle = '#09f';
context.lineWidth = 10;
for (var i=0;i<lineJoin.length;i ){
context.lineJoin = lineJoin[i];
context.beginPath();
context.moveTo(-5,5 i*40);
context.lineTo(35,45 i*40);
context.lineTo(75,5 i*40);
context.lineTo(115,45 i*40);
context.lineTo(155,5 i*40);
context.stroke();
}
}
</script>
</head>
<body οnlοad="draw('canvas');">
<h1>lineJoin屬性實例</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>
