zoukankan      html  css  js  c++  java
  • h5-canvas 单像素操作

    ###1. 自定义获取指定坐标像素

      var canvas = document.querySelector("#cav");

      if(canvas.getContext){

        var ctx= canvas.getContext("2d");

        ctx.fillRect(100,100,200,200)

        var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);

        var color = getColor(imageData,50,50);

        console.log(color);

        function getColor(imageData,x,y){

          var data = imageData.data;

          var w = imageData.width;

          var color = [];

          color[0] = data[4*(x*w+y)];   //  R

          // 例如:(1,2)该点有y*w行   +  x 个像素  即 2*2+1=5

           color[1] = data[4*(y*w+x)+1];   // G

          color[2] = data[4*(y*w+x)+2];    //  B

          color[3] = data[4*(y*w+x)+3];    //   A    

          return color;

        }

      }

    注意:css定义的是canvas背景颜色,使用getImageData获取的是canvas画布上的元素信息,默认为黑色透明

      

  • 相关阅读:
    c# 运算符 ? ??
    c# linq <未完>
    javasript this
    python3 闭包(一)
    dom 中的换行符
    (转)关于 awk 的 pattern(模式)
    linux note(1)
    python sqlite3
    python 特殊方法
    Go Example--锁
  • 原文地址:https://www.cnblogs.com/john-hwd/p/10568779.html
Copyright © 2011-2022 走看看