canvas图像处理教程（下）：绘制图像和像素访问

canvas 绘制图像

可以使用drawImage()方法在canvas上绘制图像。该方法接受三个参数：要绘制的图像、图像的x坐标和图像的y坐标。例如，以下代码将图像image.png绘制到canvas的(10, 10)坐标处：

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

canvas 裁剪图像

可以使用clip()方法裁剪canvas上的图像。该方法接受四个参数：裁剪矩形的x坐标、裁剪矩形的y坐标、裁剪矩形的宽度和裁剪矩形的高度。例如，以下代码将canvas上的图像裁剪为(10, 10, 100, 100)的矩形：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 10, 10);
ctx.clip(10, 10, 100, 100);

canvas 变形图像

可以使用transform()方法变形canvas上的图像。该方法接受六个参数：缩放x轴的比例、缩放y轴的比例、旋转角度（以弧度表示）、x轴的位移、y轴的位移和缩放的中心点。例如，以下代码将canvas上的图像缩放为原来的2倍，旋转45度，并将其移动到(100, 100)的坐标处：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 10, 10);
ctx.transform(2, 0, 0, 2, 100, 100);

canvas 访问像素

可以使用getImageData()方法访问canvas上的像素。该方法接受四个参数：像素矩形的x坐标、像素矩形的y坐标、像素矩形的宽度和像素矩形的高度。例如，以下代码获取canvas上(10, 10, 100, 100)矩形中的像素：

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

然后，可以使用data属性访问像素数据。data属性是一个Uint8ClampedArray，其中每个元素代表一个像素的红色、绿色、蓝色和alpha值。例如，以下代码获取(10, 10)像素的红色值：

var redValue = imageData.data[0];

也可以使用putImageData()方法将像素数据写回canvas。例如，以下代码将imageData中的像素数据写回canvas的(10, 10)坐标处：

ctx.putImageData(imageData, 10, 10);