HTML5移动开发学习笔记之Canvas基础(5)_H5之家 - 中国HTML5教程资源分享第一站

Canvas与SVG以及Flash稍有不同，绘制的图形/图像并不能作为对象操作。也就是说使用stroke()或者fill()方法绘制的图形，既不能移动它也不能删除它。如果想操作绘制的图形/图像，使用SVG或者Flash实现比使用Canvas要好。

Canvas中绘制的图形/图像作为一个整体的位图保存，因此可以访问各个像素信息。也就是说，可以使用JavaScript处理Canvas上绘制的图像像素信息。这是Canvas的一个特色

1）像素处理的API

imagedata=ctx.getImageData(sx,sy,sw,sh) 返回以(sx,sy)为左上顶点，宽为sw,高为sh的矩形图像-imagedata对象。

ctx.putImageData(imagedata,dx,dy) 将imagedata所表示的图像绘制在顶点坐标为(dx,dy)处。

简述之，使用getImageData()方法取出Canvas上图像的像素数据，通过JavaScript加工过这些像素数据后，使用putImageData方法，重新绘制到Canvas中。

ImageData对象是代表图像像素数据的对象。此对象定义了三种属性：

①imagedata.width 图像数据的宽度

②imagedata.height 图像数据的高度

③imagedata.data 图像数据（CanvasPixelArray类型）

在JavaScript中进行像素数据读取，并进行加工与输出时的具体操作是，从imagedata.data中得到CanvasPixelArray类型的对象。此对象是保存像素信息的一元数组。但是与JavaScript的Array对象不同，不可对其进行与通常数组一样的操作。

举个栗子：(本例中，当用户将桌面上的图像文件拖动到中后，首先读取图像文件并在浏览器中显示，接着对图像进行黑白变换，在原图的旁边显示变换后的图像)

用户将桌面上的图像文件拖动到浏览器中的界面：

进行黑白变换后的效果：

代码如下：

复制代码

1 <!DOCTYPE >

2 <html>

3 <head>

4 <meta charset="utf-8" />

5 <style type="text/css">

6 body{

7 font-family:宋体,Arial,Helvetica,sans-serif;

8 font-size:80%;

9 }

10 #dp{

11 width:200px;

12 min-height:70px;

13 border:1px solid #000000;

14 background-color:#eeeeee;

15 padding:len;

16 margin:2em;

17 }

18 #dp img{

19 margin-right:lem;

20 }

21 </style>

22 <script>

23 (function(){

25 //拖动区域的div元素

26 var dp=null;

27 //FileReader接口对象

28 var reader=null;

30 //页面导入时的处理

31 window.addEventListener("load",function(){

32 //获取拖动区域的div元素

33 dp=document.getElementById("dp");

34 //设置dragover事件的事件侦听

35 dp.addEventListener("dragover",function(evt){