像素处理
读写像素值有3种方法：getImageData()、putImageData()和createImageData()这3种方法里都包含“ImageData”这个词，我们先得搞清楚它到底是什么意思。
使用ImageData对象
让我们先设计一个像素的画布，并在里面绘制4个颜色分别深蓝、凫蓝、石灰及黄色的1x1像素大小的矩形，然后通过它来了解一下ImageData对象。
context.fillStyle=*navy';context.fillRect(,1);context.fillStyle='teal';context.fillRect(,l)；context.fillStyle='lime';context.fillRect(,1);context.fillStyle='yellow';context.fillRect(l,);下一步我们使用方法getImageData(sx，sy,sw，sh)来得到ImageData对象。4个参数决决定了我们希望获取的canvas矩形选区，如图7所示。
ImageData=context.getlmageData(
,canvas.width,canvas.height
);
ImageData对象包含有属性mageData.width、ImageData.height及ImageData.data。后者含有CanvasPixelArray的实际像素值——这是一个含有选区中每个像素的红、绿、蓝以及alpha值组成的扁平数组，开始于左上方，方向为从左至右、从上至下。值的数量被保存在属性ImageData.data.length中。
宁波网站建设认为我们可以使用一个简单的for循环读出CanvasPixelArray中的每个值，并通过alert〇显示。计数从0开始，每次循环+4,以便能逐个像素读取。我们设置偏移值来依序读取每个RGBA值，红色为i,绿色为i+1,蓝色为i+2,而alpha值为i+3:
for(vari=〇;i
for(vari=〇;i
context.putImageData(
^ImageData,ax,dy,[dirtyX,dirtY,dirtyWidth,dirtyHeight]
头3个参数是不可缺少的，除了ImageData对象之外，它们还包含了原点dx/dy的坐标，CanvasPixelArray从该坐标位置开始被应用到设定的宽度和高度范围内。可选的dirty参数从CanvasPixelArray中切出一个指定选区描绘到画布上，并仅在该选区比源图像小时才有效。图8展示了这个4像素大小的画布在修改像素前后的不同，并提供了CanvasPixe丨Array相关值列表。
你可以使用createImageData()方法直接初始化一个空白ImageData,其宽度和高度等于传入的参数sw/sh,或者是跟传人的imagedata对象保持一致。在这两种情况下，CanvasPixelArray的所有像素都被设为transparent/black，也就是rgba(,0):
context.createlmageData(sw,sh)context.createlmageData(imagedata)因此我们还可以通过createlmageDataO直接创建中的修正过的画布图像，并通过putImageData()将其绘制：
varimagedata=context.createImageData();for(vari=0;i
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
