<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    oGC.fillRect(0,0,100,100);//绘制黑色方块
    var oImg = oGC.getImageData(0,0,100,100);//获取图像的像素
    alert( oImg.width );  //一行的像素个数100
    alert( oImg.height );  //一列的像素个数100
    alert( oImg.data.length );  //整体像素的数组集合40000,每个像素占4个位置。
    alert( oImg.data[0] );  //0 - 255 黑色到白色 0
    alert( oImg.data[1] );  //0 - 255 黑色到白色 0
    alert( oImg.data[2] );  //0 - 255 黑色到白色 0
    alert( oImg.data[3] );  //0 - 255 透明到不透明 255
    for(var i=0;i<oImg.width*oImg.height;i++){
        oImg.data[4*i] = 255;
        oImg.data[4*i+1] = 0;
        oImg.data[4*i+2] = 0;
        oImg.data[4*i+3] = 100;
    }
    oGC.putImageData(oImg,100,100);//设置新的像素数据
};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    var oImg = oGC.createImageData(100,100);
    for(var i=0;i<oImg.width*oImg.height;i++){
        oImg.data[4*i] = 255;
        oImg.data[4*i+1] = 0;
        oImg.data[4*i+2] = 0;
        oImg.data[4*i+3] = 100;    
    }
    oGC.putImageData(oImg,100,100);//创建新的像素集合
};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black; color:white; font-size:30px;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    var aLi = document.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            var str = this.innerHTML;        
            var h = 180;        
            oGC.clearRect(0,0,oC.width,oC.height);    
            oGC.font = h + 'px impact';
            oGC.textBaseline = 'top';    
            oGC.fillStyle = 'red';
            var w = oGC.measureText(str).width;
            oGC.fillText(str,(oC.width - w)/2,(oC.height - h)/2);    
            var oImg = oGC.getImageData((oC.width - w)/2,(oC.height - h)/2,w,h);
            oGC.clearRect(0,0,oC.width,oC.height);    
            var arr = randomArr(w*h,w*h/10);    
            var newImg = oGC.createImageData(w,h);    
            for(var i=0;i<arr.length;i++){
                newImg.data[4*arr[i]] = oImg.data[4*arr[i]];
                newImg.data[4*arr[i]+1] = oImg.data[4*arr[i]+1];
                newImg.data[4*arr[i]+2] = oImg.data[4*arr[i]+2];
                newImg.data[4*arr[i]+3] = oImg.data[4*arr[i]+3];
            }    
            oGC.putImageData(newImg,(oC.width - w)/2,(oC.height - h)/2);    
        };
    }
    
    function randomArr(iAll,iNow){
        var arr = [];
        var newArr = [];
        for(var i=0;i<iAll;i++){
            arr.push(i);
        }
        for(var i=0;i<iNow;i++){
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
        }
        return newArr;
    }
};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
<ul style="float:left;">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black; color:white; font-size:30px;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    var aLi = document.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            var str = this.innerHTML;
            var h = 180;
            var timer = null;
            clearInterval(timer);
            var iNow = 0;
            oGC.clearRect(0,0,oC.width,oC.height);
            oGC.font = h + 'px impact';    
            oGC.textBaseline = 'top';            
            oGC.fillStyle = 'red';    
            var w = oGC.measureText(str).width;
    
            oGC.fillText(str,(oC.width - w)/2,(oC.height - h)/2);
            
            var oImg = oGC.getImageData((oC.width - w)/2,(oC.height - h)/2,w,h);
            oGC.clearRect(0,0,oC.width,oC.height);
            
            var arr = randomArr(w*h,w*h/10);
            
            var newImg = oGC.createImageData(w,h);
            
            timer = setInterval(function(){
                
                for(var i=0;i<arr[iNow].length;i++){
                    newImg.data[4*arr[iNow][i]] = oImg.data[4*arr[iNow][i]];
                    newImg.data[4*arr[iNow][i]+1] = oImg.data[4*arr[iNow][i]+1];
                    newImg.data[4*arr[iNow][i]+2] = oImg.data[4*arr[iNow][i]+2];
                    newImg.data[4*arr[iNow][i]+3] = oImg.data[4*arr[iNow][i]+3];
                }
            
                oGC.putImageData(newImg,(oC.width - w)/2,(oC.height - h)/2);
                if(iNow == 9){
                    iNow = 0;
                    clearInterval(timer);
                }
                else{
                    iNow++;
                }
                
            },200);
            
            
            
        };
    }
    
    function randomArr(iAll,iNow){
        var arr = [];
        var allArr = [];
        for(var i=0;i<iAll;i++){
            arr.push(i);
        }
        
        for(var j=0;j<iAll/iNow;j++){
            
            var newArr = [];
            
            for(var i=0;i<iNow;i++){
                newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
            }
            
            allArr.push(newArr);
            
        }
        
        
        return allArr;
    }
    
    
};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
<ul style="float:left;">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black; color:white; font-size:30px;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    oGC.fillRect(0,0,100,100);
    var oImg = oGC.getImageData(0,0,100,100);
    alert( getXY(oImg,3,5) );  
    setXY( oImg,3,5,[255,0,0,255] );
    for(var i=0;i<oImg.width;i++){
        setXY( oImg,i,5,[255,0,0,255] );
    }
    oGC.putImageData(oImg,100,100);
    function getXY(obj,x,y){ //针对一行一列进行操作    
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;    
        var color = [];    
        color[0] = d[4*(y*w+x)];
        color[1] = d[4*(y*w+x)+1];
        color[2] = d[4*(y*w+x)+2];
        color[3] = d[4*(y*w+x)+3];    
        return color;    
    }
    
    function setXY(obj,x,y,color){
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;

        d[4*(y*w+x)] = color[0];
        d[4*(y*w+x)+1] = color[1];
         d[4*(y*w+x)+2] = color[2];
        d[4*(y*w+x)+3] = color[3];
        
    }
    
    
};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black; color:white; font-size:30px;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    var yImg = new Image();
    
    yImg.onload = function(){
        draw(this);
    };
    
    yImg.src = '2.png';
    
    function draw(obj){
        oC.width = obj.width;
        oGC.drawImage(obj,0,0);
        var oImg = oGC.getImageData(0,0,obj.width,obj.height);
        var w = oImg.width;
        var h = oImg.height;
        for(var i=0;i<h;i++){
            for(var j=0;j<w;j++){
                var result = [];
                var color = getXY(oImg,j,i);
                result[0] = 255 - color[0];//反色
                result[1] = 255 - color[1];
                result[2] = 255 - color[2];
                result[3] = 255;        
                setXY(oImg,j,i,result);        
            }    
        }
        oGC.putImageData(oImg,0,obj.height);    
    }
    
    function getXY(obj,x,y){ //针对一行一列进行操作
        
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;
        
        var color = [];    
        color[0] = d[4*(y*w+x)];
        color[1] = d[4*(y*w+x)+1];
        color[2] = d[4*(y*w+x)+2];
        color[3] = d[4*(y*w+x)+3];
        
        return color;
        
    }
    
    function setXY(obj,x,y,color){
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;
        
        d[4*(y*w+x)] = color[0];
        d[4*(y*w+x)+1] = color[1];
         d[4*(y*w+x)+2] = color[2];
        d[4*(y*w+x)+3] = color[3];
    }
};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black; color:white; font-size:30px;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    var yImg = new Image();
    yImg.onload = function(){
        draw(this);    
    };
    
    yImg.src = '2.png';
    
    function draw(obj){
        oC.width = obj.width;
        oGC.drawImage(obj,0,0);
        
        var oImg = oGC.getImageData(0,0,obj.width,obj.height);
        
        var w = oImg.width;
        var h = oImg.height;
        
        var newImg = oGC.createImageData(obj.width,obj.height);
        
        for(var i=0;i<h;i++){
            
            for(var j=0;j<w;j++){
                
                var result = [];
                
                var color = getXY(oImg,j,i);
                
                result[0] = 255 - color[0];
                result[1] = 255 - color[1];
                result[2] = 255 - color[2];
                result[3] = 255;
                
                setXY(newImg,j,h-i,result);
                
            }
            
        }
        
        oGC.putImageData(newImg,0,obj.height);
        
    }
    
    function getXY(obj,x,y){ //针对一行一列进行操作
        
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;
        
        var color = [];
        
        color[0] = d[4*(y*w+x)];
        color[1] = d[4*(y*w+x)+1];
        color[2] = d[4*(y*w+x)+2];
        color[3] = d[4*(y*w+x)+3];
        
        return color;
        
    }
    
    function setXY(obj,x,y,color){
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;
        
        
        d[4*(y*w+x)] = color[0];
        d[4*(y*w+x)+1] = color[1];
         d[4*(y*w+x)+2] = color[2];
        d[4*(y*w+x)+3] = color[3];
        
    }
    
};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black; color:white; font-size:30px;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    var yImg = new Image();
    
    yImg.onload = function(){
        
        draw(this);
        
    };
    
    yImg.src = '2.png';
    
    function draw(obj){
        oC.width = obj.width;
        oGC.drawImage(obj,0,0);
        
        var oImg = oGC.getImageData(0,0,obj.width,obj.height);
        
        var w = oImg.width;
        var h = oImg.height;
        
        var newImg = oGC.createImageData(obj.width,obj.height);
        
        for(var i=0;i<h;i++){
            
            for(var j=0;j<w;j++){
                
                var result = [];
                
                var color = getXY(oImg,j,i);
                
                result[0] = 255 - color[0];
                result[1] = 255 - color[1];
                result[2] = 255 - color[2];
                result[3] = 255*i/h;
                
                setXY(newImg,j,h-i,result);
                
            }
            
        }
        
        oGC.putImageData(newImg,0,obj.height);
        
    }
    
    function getXY(obj,x,y){ //针对一行一列进行操作
        
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;
        
        var color = [];
        
        color[0] = d[4*(y*w+x)];
        color[1] = d[4*(y*w+x)+1];
        color[2] = d[4*(y*w+x)+2];
        color[3] = d[4*(y*w+x)+3];
        
        return color;
        
    }
    
    function setXY(obj,x,y,color){
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;
        
        
        d[4*(y*w+x)] = color[0];
        d[4*(y*w+x)+1] = color[1];
         d[4*(y*w+x)+2] = color[2];
        d[4*(y*w+x)+3] = color[3];
        
    }
    
};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black; color:white; font-size:30px;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    var yImg = new Image();
    
    yImg.onload = function(){
        
        draw(this);
        
    };
    
    yImg.src = '2.jpg';
    
    function draw(obj){
        oC.width = obj.width;
        oC.height = obj.height*2;
        oGC.drawImage(obj,0,0);
        
        var oImg = oGC.getImageData(0,0,obj.width,obj.height);
        
        var w = oImg.width;
        var h = oImg.height;
        
        var num = 5;
        
        var newImg = oGC.createImageData(obj.width,obj.height);
        
        var stepW = w/num;
        var stepH = h/num;
        
        for(var i=0;i<stepH;i++){
            for(var j=0;j<stepW;j++){
                
                var color = getXY(oImg,j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num));
                
                for(var k=0;k<num;k++){
                    for(var l=0;l<num;l++){
                        setXY(newImg,j*num+l,i*num+k,color);
                    }
                }
                
            }
        }
        
        oGC.putImageData(newImg,0,obj.height);
        
    }
    
    function getXY(obj,x,y){ //针对一行一列进行操作
        
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;
        
        var color = [];
        
        color[0] = d[4*(y*w+x)];
        color[1] = d[4*(y*w+x)+1];
        color[2] = d[4*(y*w+x)+2];
        color[3] = d[4*(y*w+x)+3];
        
        return color;
        
    }
    
    function setXY(obj,x,y,color){
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;
        
        
        d[4*(y*w+x)] = color[0];
        d[4*(y*w+x)+1] = color[1];
         d[4*(y*w+x)+2] = color[2];
        d[4*(y*w+x)+3] = color[3];
        
    }
    
};
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>

</body>
</html>