canvas -createImageData之 +4 for循环

最新推荐文章于 2025-04-29 12:45:29 发布

飞驰的蜗牛牛

最新推荐文章于 2025-04-29 12:45:29 发布

阅读量366

点赞数

分类专栏： HTML5 文章标签： css html webview

本文链接：https://blog.youkuaiyun.com/shuishou1000/article/details/122187705

版权

HTML5 专栏收录该内容

16 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p>img标签：</p>
  <!--<img id="imgid" src="color.jpg" alt="" use-credentials="anonymous">-->
    <p>canvs画板：</p>
    <canvas id="canvas" width="300" height="200" style="border:1px solid"></canvas>
    <script type="text/javascript" crossorigin="anonymous">
     var cc=document.getElementById('canvas')
     var ctx=cc.getContext('2d')
      ctx.fillRect(0,0,100,100)
      var imgData=ctx.getImageData(0,0,50,50)

    ctx.putImageData(imgData,50,150)

    var imgData01=ctx.createImageData(imgData)
    for(i=0;i<imgData01.width*imgData01.height*4;i+=4){//data的数据是一组像素的rgba值构成，所以需要遍历为4组，指定一个
      imgData01.data[i+0]=255
      imgData01.data[i+1]=0
      imgData01.data[i+2]=0
      imgData01.data[i+3]=255
    }
    ctx.putImageData(imgData01,100,100)

    var imgData02=ctx.createImageData(imgData)
    for(i=0;i<imgData02.width*imgData01.height*4;i+=4){//data的数据是一组像素的rgba值构成，所以需要遍历为4组，指定一个
      imgData02.data[i+0]=255
      imgData02.data[i+1]=0
      imgData02.data[i+2]=0
      imgData02.data[i+3]=155
    }
    ctx.putImageData(imgData02,200,100)


    </script>
  </body>
</html>