一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情。
上一节介绍了H5：画布Canvas基础知识讲解（一）之canvas基础、2D context API、路径，接下来继续讲解H5：画布Canvas基础。
插入图像
drawImage方法允许在Canvas中插入其他图像(img和Canvas元素) 。在Opera中可以在Canvas中绘制SVG图形。此方法比较复杂，可以有3个、5个或9个参数：
3个参数：最基本的drawImage使用方法。一个参数指定图像位置，另两个参数设置图像在Canvas中的位置。
5个参数：中级的drawImage使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。
9个参数：最复杂drawImage杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。
下面是上述三个使用方法的例子：
context.drawImage(img_elem, dx, dy);
context.drawImage(img_elem, dx, dy, dw, dh);
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);
可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。
像素级操作
2D Context API提供了三个方法用于像素级操作：createImageData，getImageData和putImageData。
ImageData对象保存了图像像素值。每个对象有三个属性: width,height和data。data属性类型为CanvasPixelArray，用于储存width*height*4个像素值。每一个像素 有RGB值和透明度alpha值(其值为0至255，包括alpha在内。)。像素的顺序从左至右，从上到下，按行存储。
来看一个例子：
var imgd = context.createImageData(50,50);
var pix = imgd.data;
for (var i = 0; n = pix.length, i < n; i += 4) {
pix[i ] = 255;
pix[i+3] = 127;
}
context.putImageData(imgd, 0,0);
注意：
不是所有浏览器都实现了createImageData。在支持的浏览器中，需要通过getImageData方法获取ImageData对象。
通过ImageData可以完成很多功能。如可以实现图像滤镜，或可以实现数学可视化 (如分形和其他特效)。来看一个实例：
var imgd = context.getImageData(x, y width, height);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i ] = 255 - pix[i ];
pix[i+1] = 255 - pix[i+1];
pix[i+2] = 255 - pix[i+2];
}
context.putImageData(imgd,x, y);
可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。
下一节继续讲H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变。
