Canvas中的imageData()的相关操作

Canvas中的imageData()是一个针对像素直接操作的对象函数，它的属性丰富，使用灵活，容易上手。
首先，先了解imageData():
    1.语法结构:imageData(float width, float height)
              imageData(object imageData)
              imageData(object parameters)
    2.使用方法：(直接贴代码)
    
    //上述代码中出现的imageData()和getData()以及putData(),我们可以分别做出如下解释：
        imageData(width,height):相当于截取一片区域，备用；
        getData(x,y,width,height):相当于复制已截取的去区域中的某块子区域，备用；
        putData(x,y):将getData()获取的区域放置在putData()所规定的位置(x,y)。
    3.getPixel()和setPixel():
        getPixel(x,y):获取某一位置的像素值，备用；
        setPixel(x,y,color):设置某一像素的位置和颜色。
        //实例解释setPixel()：
        function setPixel(){
            jc.start("canvas");
            var imgData=jc.imageData(190,190);
            for(var i=0;i<90;i++){
                for(var j=0;j<90;j++)
                {   
                    r+=i;
                    g+=i;
                    b+=i+j;
                    imgData.setPixel(i,i+j,'#'+r+','+g+','+b);
                }
            }
            imgData.putData(300,300);
            jc.start("canvas");
        }

        //getPixel(x,y,color):
        其返回值是一个数组，再具体一点说的话，那就是一个颜色值的数组：
        数组——color——color[0]=red;
                     color[1]=green;
                     color[2]=blue;
                     color[3]=alpha;//透明度

    4.filter():
        语法结构：filter(filterName,type)
        //其中filterName与type对应有三种方式：
            1.filterName：color————type：red,green,blue
            2.filterName：linear————type：sharp,blur
            3.自定义的addImageDataFilter函数
        //实例解释：(filter() 可针对图片或在canvas画布上的任意一部分)
        function filter(){
            var img=new Image();
            img.src="imgs/logo.png";
            img.onload=function(){
                jc.start("canvas");
            jc.image(img,150,150,120,40);
            jc.start("canvas");
            jc.imageData(100,100)
                .getData(150,150,120,40)
                .filter('linear','sharp')
                .putData(50,300);
                jc.start("canvas");
        }