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基础知识讲解（三）之文字、阴影、颜色渐变。

作者：zhulin1028

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。