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画布上的元素信息,默认为黑色透明

      

  • 相关阅读:
    开篇词The Start以及[Vjudge][HDU2242]空调教室
    [故地重游][NOIP2019]格雷码
    关于非触
    致诸君
    三角形的概率
    [HDU5970] 最大公约数
    [51Nod1534] 棋子游戏
    [TJOI2018] 数学计算
    [CF938D] Buy a Ticket
    [HDU4143] A Simple Problem
  • 原文地址:https://www.cnblogs.com/john-hwd/p/10568779.html
Copyright © 2011-2022 走看看