canvas 像素操作

来源：互联网发布：企汇网发布信息软件编辑：程序博客网时间：2024/06/13 06:00

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 值：

R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

因此，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 id="canvas" width="1200" height="550" ></canvas></body></html>

效果图：

0 0