Canvas使用样式和颜色

1、色彩

默认色彩是黑色（#000000）

fillStyle = color

    设置图形的填充颜色。

strokeStyle = color

    设置图形轮廓的颜色。

1.色板

function draw() {
  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);
    }
  

2、透明度
用 canvas 来绘制半透明的图形。
通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。

globalAlpha = transparencyValue

    这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。
    globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。

// 指定透明颜色，用于描边和填充样式
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";

    rgba() 方法与 rgb() 方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。

3、线条样式

lineWidth = value

    设置线条宽度。
    设置当前绘线的粗细。属性值必须为正数。默认值是1.0。

lineCap = type

    设置线条末端样式。
    属性 lineCap 的值决定了线段端点显示的样子。它可以为下面的三种的其中之一：butt，round 和 square。默认是 butt。

lineJoin = type

    设定线条与线条间接合处的样式。
    lineJoin 的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一：round, bevel     和 miter。默认是 miter。

miterLimit = value

    限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
    用来设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel。

getLineDash()

    返回一个包含当前虚线样式，长度为非负偶数的数组。
	方法接受一个数组，来指定线段与间隙的交替；
setLineDash(segments)

    设置当前虚线样式。

lineDashOffset = value

    设置虚线样式的起始偏移量。

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 的圆。

gradient.addColorStop(position, color)

    addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。

5、图案样式Patterns

createPattern(image, type)

    该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

6、阴影Shadow

shadowOffsetX = float

    shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。

shadowOffsetY = float

    shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。

shadowBlur = float

    shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。

shadowColor = color

    shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

7、Canvas填充

 "nonzero": non-zero winding rule, 默认值.
 "evenodd":  even-odd winding rule.