设置透明度

使用 globalApha 可以设置绘制图形的透明度

window.onload = function () {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");

  context.globalAlpha = 0.5;

  context.fillStyle = 'red';
  context.fillRect(150, 50, 20, 100);

  context.fillStyle = 'blue';
  context.fillRect(110, 90, 100, 20);
}

效果：

图形颜色混合

使用 CanvasRenderingContext2D.globalCompositeOperation 可以决定接下来绘制的图形与之前画板的图形颜色及形状的混合方式，类似PS等软件的图层叠加方式

参数参考：CanvasRenderingContext2D/globalCompositeOperation

window.onload = function () {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");


  context.fillStyle = 'red';
  context.fillRect(150, 50, 20, 100);

  context.globalCompositeOperation = 'xor';

  context.fillStyle = 'blue';
  context.fillRect(110, 90, 100, 20);
}

效果：

添加阴影

window.onload = function () {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");

  context.shadowColor = '#BAD8B6';
  context.shadowBlur = 10;
  context.shadowOffsetX = 5;
  context.shadowOffsetY = 5;

  context.fillStyle = '#BAD8B6';
  context.fillRect(135, 75, 50, 50);

}

效果：

位移缩放与旋转

位移

context.save() 保存当前工作区状态，在一定修改后使用context.restore()恢复工作区状态。这里的状态指的是透明度，颜色风格等状态，而填充的图形这种不属于状态，所以恢复状态的时候，所绘制的图形还会保留。

window.onload = function () {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");

  context.save()
  for (var j = 0; j < 6; j++) {
    context.save();
    for (var i = 0; i < 10; i++) {
      context.fillStyle = '#2E94B9';
      context.fillRect(0, 0, 10, 10);
      context.translate(20, 0);
    }
    context.restore();
    context.translate(0, 20);
  }

  context.restore();
  context.fillStyle = 'red';
  context.fillRect(0, 0, 50, 50);

}

效果：

缩放

缩放使用：scale(x,y)，x 为x轴的放大或缩小倍数，y为y轴的放大或缩小倍数

旋转

使用 translate 可以更改旋转基准点的位置，Math.PI * 2 是360度

window.onload = function () {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");

  context.translate(160, 100);
  context.fillStyle = "#B31313";
  var num = 12;
  for (var i = 0; i < num; i++) {
    context.rotate(Math.PI * 2 / num);
    context.beginPath();
    context.arc(50, 0, 5, 0, Math.PI * 2);
    context.fill();
  }
}

效果：

像素操作

我们可以使用getImageData来复制canvas上的指定矩形区域内的数据，可以打印，也可以修改后使用putImageData将修改后的图像再放置到canvas上

下边的代码绘制一个举行，然后使用getImageData获取点(30, 30)处的像素信息

window.onload = function () {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");

  context.fillStyle = "#90D26D";
  context.globalAlpha = 0.9;
  context.fillRect(0, 0, 200, 200);

  var imagedata = context.getImageData(0, 0, 100, 100),
      x = 30,
      y = 30,
      index = (y * imagedata.width + x) * 4;

  console.log("red: " + imagedata.data[index]);
  console.log("green: " + imagedata.data[index+1]);
  console.log("blue: " + imagedata.data[index+2]);
  console.log("alpha: " + imagedata.data[index+3]);

}

imagedata的数据格式是将二维的图像数据转化为一维数据，每一个像素点由4个值组成，也就是rgba，所以某个图像上的点的颜色信息对应的imagedata的index位置就是(y * imagedata.width +x) * 4

window.onload = function () {
  var canvas = document.getElementById('canvas'),
      context = canvas.getContext("2d");

  var imageData = context.getImageData(0, 0, 320, 200);

  for (var x = 50; x < 100; x++) {
    for (var y = 50; y < 100; y++) {
      var index = (y * imageData.width + x) * 4;
      imageData.data[index] = 56;
      imageData.data[index+1] = 142;
      imageData.data[index+2] = 60;
      imageData.data[index+3] = 255;
    }
  }
  context.putImageData(imageData, 10, 10);
}

上边的代码绘制了一个绿色的长方形。 需要注意的是这两个函数比较消耗CPU资源，所以除非必要，不要获取或者设置整个布画的内容，可以封装获取或者设置像素点的函数