（5）色彩 Colors
fillStyle = color 设置图形的填充颜色。
strokeStyle = color设 置图形轮廓的颜色。
默认都是黑色的颜色和边框
// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle ="orange";
ctx.fillStyle ="#FFA500";
ctx.fillStyle ="rgb(255,165,0)";
ctx.fillStyle ="rgba(255,165,0,1)";
通过for循环，利用i、j的渐变绘制渐变色
例子：functiondraw(){
var ctx = document.getElementById('canvas').getContext('2d');
for(var i=0;i<6;i++){
for(var j=0;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);
}
}}
效果：
例：functiondraw(){
var ctx = document.getElementById('canvas').getContext('2d');
for(var i=0;i<6;i++){
for(var j=0;j<6;j++){
ctx.strokeStyle ='rgb(0,'+ Math.floor(255-42.5*i)+','+
Math.floor(255-42.5*j)+')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
}
透明度 Transparency
// 指定透明颜色，用于描边和填充样式
ctx.strokeStyle ="rgba(255,0,0,0.5)";
ctx.fillStyle ="rgba(255,0,0,0.5)";
（6）线条样式
lineWidth = value设置线条宽度。
lineCap = type设置线条末端样式。（butt默认，round圆角 和 square多出一个方块效果）
lineJoin = type设定线条与线条间接合处的样式。（round圆角,bevel角被磨平 和 miter直角。默认是 miter）
miterLimit = value限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
例子：通过设置线条宽带渐增画图
functiondraw(){
var ctx = document.getElementById('canvas').getContext('2d');
for(var i =0; i <10; i++){
ctx.lineWidth =1+i;
ctx.beginPath();
ctx.moveTo(5+i*14,5);
ctx.lineTo(5+i*14,140);
ctx.stroke();
}}
效果：
（7）渐变 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 的圆。
var lineargradient = ctx.createLinearGradient(0,0,150,150);var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);
创建出 canvasGradient 对象后，我们就可以用 addColorStop 方法给它上色了。
gradient.addColorStop(position, color)
addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。
你可以根据需要添加任意多个色标（color stops）。下面是最简单的线性黑白渐变的例子。
var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');
（8）图案样式 Patterns
createPattern(image, type)该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。
写法：
var img =newImage();
img.src ='someimage.png';var ptrn = ctx.createPattern(img,'repeat');
案例：
functiondraw(){
var ctx = document.getElementById('canvas').getContext('2d');
// 创建新 image 对象，用作图案
var img =newImage();
img.src ='images/wallpaper.png';
img.onload =function(){
// 创建图案
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150);
}}
（9）阴影 Shadows
shadowOffsetX = float
shadowOffsetX和shadowOffsetY用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowOffsetY = float
shadowOffsetX和 shadowOffsetY用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowBlur = float
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
shadowColor = color
shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。
例：文字阴影的例子
functiondraw(){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.shadowOffsetX =2;
ctx.shadowOffsetY =2;
ctx.shadowBlur =2;
ctx.shadowColor ="rgba(0, 0, 0, 0.5)";
ctx.font ="20px Times New Roman";
ctx.fillStyle ="Black";
ctx.fillText("Sample String",5,30);
未完待续...