fillStyle（路径样式属性）
context.fillStyle=color
设置将用于填充当前路径内部的颜色。
这些是颜色选项（必须引用这些选项）：
-
一个名为 color 的 CSS ，例如
context.fillStyle='red' -
十六进制颜色，例如
context.fillStyle='#FF0000' -
RGB 颜色，例如
context.fillStyle='rgb(red,green,blue)'，其中红色，绿色和蓝色是整数 0-255，表示每种成分颜色的强度。 -
HSL 颜色，例如
context.fillStyle='hsl(hue,saturation,lightness)'，其中色调是色轮上的整数 0-360，饱和度和亮度是指示每个组分强度的百分比（0-100％）。 -
HSLA 颜色，例如
context.fillStyle='hsl(hue,saturation,lightness,alpha)'，其中色调是色轮上的整数 0-360，饱和度和亮度是指示每个分量的强度的百分比（0-100％），并且α是表示不透明度的小数值 0.00-1.00。
你还可以指定这些颜色选项（这些选项是由上下文创建的对象）：
-
线性渐变，是使用
context.createLinearGradient创建的线性渐变对象 -
径向渐变，是使用
context.createRadialGradient创建的径向渐变对象 -
模式是使用
context.createPattern创建的模式对象
<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){
// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// stroke using a CSS color: named, RGB, HSL, etc
ctx.fillStyle='red';
ctx.fillRect(50,50,100,50);
// stroke using a linear gradient
var gradient = ctx.createLinearGradient(225,50,300,50);
gradient.addColorStop(0,'red');
gradient.addColorStop(1,'green');
ctx.fillStyle=gradient;
ctx.fillRect(200,50,100,50);
// stroke using a radial gradient
var gradient = ctx.createRadialGradient(100,175,5,100,175,30);
gradient.addColorStop(0,'red');
gradient.addColorStop(1,'green');
ctx.fillStyle=gradient;
ctx.fillRect(50,150,100,50);
// stroke using a pattern
var patternImage=new Image();
patternImage.onload=function(){
var pattern = ctx.createPattern(patternImage,'repeat');
ctx.fillStyle=pattern;
ctx.fillRect(200,150,100,50);
}
patternImage.src='http://i.stack.imgur.com/ixrWe.png';
// for demo only, draw labels by each stroke
ctx.fillStyle='black';
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.font='14px arial';
ctx.fillText('CSS color',100,40);
ctx.fillText('Linear Gradient color',250,40);
ctx.fillText('Radial Gradient color',100,140);
ctx.fillText('Pattern color',250,140);
}); // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=350 height=250></canvas>
</body>
</html>