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 onload="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 onload="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 onload="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 onload="draw('canvas');">
<h1>lineJoin属性实例</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>
