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>

HTML5 canvas图像绘制方法与像素操作属性和方法的相关教程结束。