1.3. Canvas API：图像处理

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

• image：图像元素
• sx：图像内部的横坐标，用于映射到画布的放置点上。
• sy：图像内部的纵坐标，用于映射到画布的放置点上。
• sWidth：图像在画布上的宽度，会产生缩放效果。如果未指定，则图像不会缩放，按照实际大小占据画布的宽度。
• sHeight：图像在画布上的高度，会产生缩放效果。如果未指定，则图像不会缩放，按照实际大小占据画布的高度。
• dx：画布内部的横坐标，用于放置图像的左上角
• dy：画布内部的纵坐标，用于放置图像的右上角
• dWidth：图像在画布内部的宽度，会产生缩放效果。
• dHeight：图像在画布内部的高度，会产生缩放效果。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'image.png';
img.onload = function () {
  ctx.drawImage(img, 0, 0);
};

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image(60, 45);
image.onload = drawImageActualSize;
image.src = 'https://example.com/image.jpg';
function drawImageActualSize() {
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
}

• CanvasRenderingContext2D.getImageData()：将画布读取成一个 ImageData 对象
• CanvasRenderingContext2D.putImageData()：将 ImageData 对象写入画布
• CanvasRenderingContext2D.createImageData()：生成 ImageData 对象

• CanvasRenderingContext2D.getImageData()方法用来读取<canvas>的内容，返回一个 ImageData 对象，包含了每个像素的信息。

  ctx.getImageData(sx, sy, sw, sh)
  

• getImageData()方法接受四个参数。sx和sy是读取区域的左上角坐标，sw和sh是读取区域的宽度和高度。如果想要读取整个<canvas>区域，可以写成下面这样。

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  

• getImageData()方法返回的是一个ImageData对象。该对象有三个属性。
  • ImageData.data：一个一维数组。该数组的值，依次是每个像素的红、绿、蓝、alpha 通道值（每个值的范围是 0～255），因此该数组的长度等于图像的像素宽度 x 图像的像素高度 x 4。这个数组不仅可读，而且可写，因此通过操作这个数组，就可以达到操作图像的目的。
  • ImageData.width：浮点数，表示 ImageData 的像素宽度。
  • ImageData.height：浮点数，表示 ImageData 的像素高度。

• CanvasRenderingContext2D.putImageData()方法将ImageData对象的像素绘制在<canvas>画布上。该方法有两种使用格式。

  ctx.putImageData(imagedata, dx, dy)
  ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
  

• 该方法有如下参数。
  • imagedata：包含像素信息的 ImageData 对象。
  • dx：<canvas>元素内部的横坐标，用于放置 ImageData 图像的左上角。
  • dy：<canvas>元素内部的纵坐标，用于放置 ImageData 图像的左上角。
  • dirtyX：ImageData 图像内部的横坐标，用于作为放置到<canvas>的矩形区域的左上角的横坐标，默认为0。
  • dirtyY：ImageData 图像内部的纵坐标，用于作为放置到<canvas>的矩形区域的左上角的纵坐标，默认为0。
  • dirtyWidth：放置到<canvas>的矩形区域的宽度，默认为 ImageData 图像的宽度。
  • dirtyHeight：放置到<canvas>的矩形区域的高度，默认为 ImageData 图像的高度。
• 下面是将 ImageData 对象绘制到<canvas>的例子。

  ctx.putImageData(imageData, 0, 0);
  

• CanvasRenderingContext2D.createImageData()方法用于生成一个空的ImageData对象，所有像素都是透明的黑色（即每个值都是0）。该方法有两种使用格式。

  ctx.createImageData(width, height)
  ctx.createImageData(imagedata)
  

• createImageData()方法的参数如下。
  • width：ImageData 对象的宽度，单位为像素。
  • height：ImageData 对象的高度，单位为像素。
  • imagedata：一个现有的 ImageData 对象，返回值将是这个对象的拷贝。

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  var imageData = ctx.createImageData(100, 100);
  

• 上面代码中，imageData是一个 100 x 100 的像素区域，其中每个像素都是透明的黑色。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.save();

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.fillStyle = 'green';
ctx.restore();
ctx.fillRect(10, 10, 100, 100);

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.canvas === canvas // true

• CanvasRenderingContext2D.rotate()：图像旋转
• CanvasRenderingContext2D.scale()：图像缩放
• CanvasRenderingContext2D.translate()：图像平移
• CanvasRenderingContext2D.transform()：通过一个变换矩阵完成图像变换
• CanvasRenderingContext2D.setTransform()：取消前面的图像变换

• CanvasRenderingContext2D.rotate()方法用于图像旋转。它接受一个弧度值作为参数，表示顺时针旋转的度数。

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.rotate(45 * Math.PI / 180);
  ctx.fillRect(70, 0, 100, 30);
  

• 上面代码会显示一个顺时针倾斜45度的矩形。注意，rotate()方法必须在fillRect()方法之前调用，否则是不起作用的。
• 旋转中心点始终是画布左上角的原点。如果要更改中心点，需要使用translate()方法移动画布。

• CanvasRenderingContext2D.scale()方法用于缩放图像。它接受两个参数，分别是x轴方向的缩放因子和y轴方向的缩放因子。默认情况下，一个单位就是一个像素，缩放因子可以缩放单位，比如缩放因子0.5表示将大小缩小为原来的50%，缩放因子10表示放大十倍。

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.scale(10, 3);
  ctx.fillRect(10, 10, 10, 10);
  

• 上面代码中，原来的矩形是 10 x 10，缩放后展示出来是 100 x 30。
• 如果缩放因子为1，就表示图像没有任何缩放。如果为-1，则表示方向翻转。ctx.scale(-1, 1)为水平翻转，ctx.scale(1, -1)表示垂直翻转。

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.scale(1, -2);
  ctx.font = "16px serif";
  ctx.fillText('Hello world!', 20, -20);
  

• 上面代码会显示一个水平倒转的、高度放大2倍的Hello World!。
• 注意，负向缩放本质是坐标翻转，所针对的坐标轴就是画布左上角原点的坐标轴。

• CanvasRenderingContext2D.translate()方法用于平移图像。它接受两个参数，分别是 x 轴和 y 轴移动的距离（单位像素）。

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.translate(50, 50);
  ctx.fillRect(0, 0, 100, 100);
  

• CanvasRenderingContext2D.transform()方法接受一个变换矩阵的六个元素作为参数，完成缩放、旋转、移动和倾斜等变形。
• 它的使用格式如下。

  ctx.transform(a, b, c, d, e, f);
  /*
  a:水平缩放(默认值1，单位倍数)
  b:水平倾斜(默认值0，单位弧度)
  c:垂直倾斜(默认值0，单位弧度)
  d:垂直缩放(默认值1，单位倍数)
  e:水平位移(默认值0，单位像素)
  f:垂直位移(默认值0，单位像素)
  * /
  

• 下面是一个例子。

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.transform(2, 0, 0, 1, 50, 50);
  ctx.fillRect(0, 0, 100, 100);
  

• 上面代码中，原始图形是 100 x 100 的矩形，结果缩放成 200 x 100 的矩形，并且左上角从(0, 0)移动到(50, 50)。
• 注意，多个transform()方法具有叠加效果。

• CanvasRenderingContext2D.setTransform()方法取消前面的图形变换，将画布恢复到该方法指定的状态。该方法的参数与transform()方法完全一致。

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.translate(50, 50);
  ctx.fillRect(0, 0, 100, 100);
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.fillRect(0, 0, 100, 100);
  

• 上面代码中，第一个fillRect()方法绘制的矩形，左上角从(0, 0)平移到(50, 50)。setTransform()方法取消了这个变换（已绘制的图形不受影响），将画布恢复到默认状态（变换矩形1, 0, 0, 1, 0, 0），所以第二个矩形的左上角回到(0, 0)。