HTML5 canvas文本应用 像素数据

    canvas API最有用的特性之一是，允许开发人员直接访问canvas底层像素数据。这种数据访问是双向的：一方面，可以以数值数组的形式获取像素数据；另一方面，可以修改数组的値以将其应用于canvas上。实际上，也可以通过直接调用像素数据的相关方法来控制canvas。这要归功于context API内置的三个函数。

    第一个函数是context.getlmageDat:a(sx, sy, sw, sh),它返回当前canvas状态，并以数值数组的方式显示。具体来说，返回的对象包括三个属性：

    width：每行有多少个像素。

    height：每列有多少个像素。

    data：一维数组，存有从canvas获取的每个像素的RGBA值。该数组为每个像素保存了四个值——红、绿、蓝和alpha透明度，每个值都在0〜255之间。因此，canvas上的每个像素都在这个数组中变成了四个整数值。数组的填充顺序是从左到右，从上到下，也就是先第一行，再第二行，依此类推。

    getlmageData函数有四个参数，该函数只返回这四个参数所限定的区域内的数据。只有被x、 y、width和height四个参数框定的矩形区域内的canvas上的像素才会被取到。因此要想获取所有像素数据，就需要这样传入参数:getlmageData(0, 0, canvas.width, canvas.height)。

    因为每个像素由四个图像数据表示，所以要计算指定的像素点对应的值是什么就有点儿头疼。

    不要紧，下面有公式。

    在设定了width和height的canvas上，在坐标(x, y)上的像素的构成如下：

    红色部分:((width * y) + x) * 4。

    绿色部分:((width * y) + x) * 4 + 1。

    蓝色部分:((width * y) + x) * 4 + 2。

    透明度部分:((width * y) + x) * 4 + 3。

    一旦可以通过像素数据的方式访问对象，就可以通过数学方式轻松修改数组中的像素值，因为这些值都是0〜255的简单数字。修改了任何像素的红、绿、蓝和alpha值之后，可以通过第二个函数来更新canvas上的显示，IP就是context.putlmageData(imagedata，dx，dy)。

    putlmageData允许开发人贝传入一组图像数据，其格式与最初从canvas上获取来的是一样的。这个函数使用起来非常方便，因为可以直接用从canvas上获取数据加以修改，然后返回。一旦这个函数被调用，所有新传入的图像数据值就会立即在canvas上更新显示出来。dx和dy参数可以用来指定偏移量。如果使用，则该函数就会跳到指定的canvas位置去更新显示传进来的像素数据。

    最后，如果想预先生成一组空的canvas数据，则可调用context,createlmageData(sw，sh), 这个函数可以创建一组图像数据并绑定在canvas对象上。这组数据可以像先前那样处理，只是在获取canves数据时，这组图像数据不一定会反映canvas的当前状态。