HTML5 canvas图像绘制方法与像素操作属性和方法

图像绘制方法
drawImage()        向画布上绘制图像、画布或视频

像素操作属性和方法
width                                返回 ImageData 对象的宽度
height                        返回         ImageData 对象的高度
data                                返回一个对象，其包含指定的 ImageData 对象的图像数据

createImageData()        创建新的、空白的 ImageData 对象
getImageData()                返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData()                把图像数据（从指定的 ImageData 对象）放回画布上

    <canvas id="g" width="880" height="450" style="border:1px solid #000"></canvas>
    <img src="data:images/eg_tulip.jpg" id="img">
    <script type="text/javascript">
    var a=document.getElementById("g");
    var ctx=a.getContext("2d");

    var img=document.getElementById("img");
    ctx.drawImage(img,0,0);                //向画布上绘制图像、画布或视频
    var imgData=ctx.getImageData(0,0,c.width,c.height);        //返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
    // 反转颜色
    for (var i=0;i<imgData.data.length;i+=4)
      {
      imgData.data[i]=255-imgData.data[i];//返回一个对象，其包含指定的 ImageData 对象的图像数据
      imgData.data[i+1]=255-imgData.data[i+1];
      imgData.data[i+2]=255-imgData.data[i+2];
      imgData.data[i+3]=255;
      }
    ctx.putImageData(imgData,0,0);//把图像数据（从指定的 ImageData 对象）放回画布上

    var imgData=ctx.createImageData(100,100);//创建新的、空白的 ImageData 对象
    for (var i=0;i<imgData.data.length;i+=4)
      {
      imgData.data[i+0]=0;
      imgData.data[i+1]=255;
      imgData.data[i+2]=0;
      imgData.data[i+3]=255;
      }
    ctx.putImageData(imgData,10,150);

    var imgDa=ctx.getImageData(10,150,100,100);
    ctx.putImageData(imgDa,10,300);
    </script>