zoukankan      html  css  js  c++  java
  • 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>
    

     

  • 相关阅读:
    luogu1197 [JSOI2008]星球大战
    luogu2085 最小函数值
    Vijos 1144 小胖守皇宫 【树形DP】
    洛谷 P1941 飞扬的小鸟 【DP+众多特判】
    codevs 1516 平均分数 【数学推理+求逆序对】
    tyvj 1936 太空战队 【强连通分量】
    USACO 2.4 Overfencing 【种子染色法+递推】
    code[vs] 2488 绿豆蛙的归宿【反向拓扑+DP】
    USACO 2.3 Zero Sum 【搜索+字符串处理+模拟计算】
    USACO 2.3 Cow Pedigrees 【DP+前缀和优化】
  • 原文地址:https://www.cnblogs.com/ricesm/p/5067024.html
Copyright © 2011-2022 走看看