HTML5Canvas像素操作的示例分析

这篇文章给大家分享的是有关HTML5 Canvas像素操作的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站专注于企业营销型网站、网站重做改版、西丰网站定制设计、自适应品牌网站建设、H5页面制作、商城网站建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为西丰等各大城市提供网站开发制作服务。

注意 由于人们可以直接操纵像素数据，因此出现了某些人利用从Canvas直接获取并且修改数据的能力做出一些恶意和非法的行为。浏览器限制了人们用Canvas跨域获取图片数据的能力，非同域图片禁止读取和修改，

在像素操作的过程中，ImageData 对象保存了图像像素值。每个对象有3个属性，即width、height和data。data属性类型为CanvasPixelArray，用于存储width*height*4个像素值。每一个像素有RGB值和透明度Alpha值（其值为0至255）。像素的顺序从左至右，从上到下，按行存储。

既然讨论像素操作，那么读者最好能够从头到尾了解这一过程，包括读取、控制和更新Canvas上的像素。这里，我们要介绍3个内置方法，即getImageData()、putImageData()、create-ImageData()。

1. getImageData()

getImageData()方法用于从Canvas中复制某一矩形区域的像素数据。具体的调用代码如下：

var canvasData = ctx.getImageData(0, 0, mycanvas.width, mycanvas.height);

要注意的是，像素级操作的运算量非常巨大，以致查看canvasData.data的数据时会由于内存的消耗过大而导致浏览器崩溃，

2. putImageData()

putImageData()方法用于修改或者更新某个图形区域中的像素信息，此方法仅能在同域下使用。本地硬盘模式下也无法使用，必须架起Web服务器。

具体代码如下：

var canvasData = ctx.putImageData(canvasData, 0, 0);

3. createImageData()

createImageData()方法根据指定的图片数据（image data）具有的宽高，建立一个ImageData对象。此方法并不会从现有的Canvas中复制像素，它生成的是完全空白的像素矩阵，它的初始值是全透明的黑色，即 (255,255,255,0)，伪代码如下：

var canvasData = ctx.createImageData(mycanvas.width,my canvas.height);

canvasData="某些像素数据"

ctx.putImageData (canvasData, 0, 0);

下面的代码中，请务必在Web服务器环境下执行，否则无法正确显示。

感谢各位的阅读！关于“HTML5 Canvas像素操作的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！