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="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>