canvas 像素操作_H5之家 - 中国HTML5教程资源分享第一站

文章目录

canvas像素操作

createImageData

说明：创建新的、空白的ImageData对象

语法：1、以指定的尺寸（以像素计）创建新的 ImageData 对象：

var imgData=context.createImageData(width,height);

2、创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）：

var imgData=context.createImageData(imageData);

参数说明：width,ImageData对象的宽带，像素计。height:ImageData对象的高度,像素计，imageData:另外一个ImagetData对象。

说明：

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

因此，transparent black 表示 (0,0,0,0)。

color/alpha 以数组形式存在，并且既然数组包含了每个像素的四条信息，数组的大小是 ImageData 对象的四倍。（获得数组大小有更简单的办法，就是使用 ImageDataObject.data.length）

包含 color/alpha 信息的数组存储于 ImageData 对象的 Data 属性中。

getImageData

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

语法：var imgData=context.getImageData(x,y,width,height);

参数说明：x,开始复制的左上角x坐标；y:开始复制的左上角y坐标。width:将要复制的矩形区域的宽带，height:将要复制的矩形区域的高度。

putImageData

putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。

语法：context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

参数：imgData:规定要放回画布的ImageData对象，x:ImageData对象左上角的x坐标，以像素计，y:ImageData对象的左上角的y坐标，以像素计。

dirtyX:可选，水平值（x），以像素计，在画布上放置图像的位置。dirtyY:可选。水平值（y），以像素计，在画布上放置图像的位置。

dirtyWidth:可选。在画布上绘制图像所使用的宽度。。dirtyHeight:可选。在画布上绘制图像所使用的高度。

示例代码：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="script/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var imgData = context.createImageData(100, 100); var width = imgData.width;//返回 ImageData 对象的宽度 var height = imgData.height;//返回 ImageData 对象的高度 /* data 属性返回一个对象，该对象包含指定的 ImageData 对象的图像数据。对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值： R - 红色 (0-255) G - 绿色 (0-255) B - 蓝色 (0-255) A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的) color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。 */ for (var i = 0; i < imgData.data.length; i += 4) { imgData.data[i + 0] = 0; imgData.data[i + 1] = 255; imgData.data[i + 2] = 0; imgData.data[i + 3] = 255; } context.putImageData(imgData, 0, 0); var newImgData = context.getImageData(0, 0, 30, 30); context.putImageData(newImgData, 110, 0); }); </script> </head> <body> <canvas ></canvas> </body> </html>

效果图：