Canvas:样式及颜色

色彩 Colors

fillStyle:填充色 fillStyle = color
**strokeStyle描边色**strokeStyle = color

透明度Transparency

globalAlpha: globalAlpha = 0.2 ;
rgba(): fillStyle = ‘rgba(r,g,b,0.2)’;
区别： 都可以作为做出透明度效果，但是从不同的样式中有不同的优势，global alpha 可以设置指定的透明度多层添加，而rgba动态的设定部分路径的透明度。

线型

lineWidth : 设置线条宽度 lineWidth = 10;

之前提过默认宽度为2是错误的，默认宽度为1，但是由于从整数像素点起向四周扩充0.5就导致了看似为2的效果，正确的解决方法应是从0.5像素画起；且线宽为奇数

lineCap : 设置末端样式 lineCap = ‘buff’

butt: 默认
round: 圆滑，半径 = 1/2 * 线宽
square: 矩形，高 = 1/2 * 线宽

lineJoin : 设置交界处的样式 lineJoin = ‘round’

round: 圆滑，半径 = 1/2 * 线宽>>bevel: 受miterLimit影响
miter: 默认，边角互连。

miterLimit : 限制交点的最大长度
setLineDash(): 返回一个包含当前虚线样式，长度为非负的数组: getLineDash([5,2]);
lineDashOffset: 设置虚线的起始偏移量 lineDashOffset = 1;

渐变Gradients

//线性渐变
var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');
ctx.fillStyle = lineargradient;
//径向渐变
var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);
radialgradient .addColorStop(0, '#FF5F98');
  radialgradient .addColorStop(0.75, '#FF0188');
  radialgradient .addColorStop(1, 'rgba(255,1,136,0)')
  ctx.fillStyle = radialgradient ;

图案样式Patterns

createPattern（image，type）;

type:

repeat
repeat-x
repeat-y
no-repeat

实例

  var img = new Image();
  img.src = 'images/wallpaper.png';
  img.onload = function(){
    // 创建图案
    var ptrn = ctx.createPattern(img,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,150,150);
  }

阴影Shadows

shadowOffsetX = float

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

shadowOffsetY = float

shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowBlur = float
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
shadowColor = color
shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。
文字阴影的例子
这个例子绘制了带阴影效果的文字。

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

Canvas填充规则

nonzero : 默认
evenodd : even-odd rule:奇偶规则。该算法在基于矢量的图形软件中实施。它决定如何与多于一个的闭合轮廓的图形的形状将被填充，

奇数：内部填充
偶数：外部填充