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

      

  • 相关阅读:
    论二级域名收集的各种姿势
    我喜欢你是寂静的-聂鲁达
    早晨充满-聂鲁达
    KALI Linux更新源
    lodash throttle和debounce
    lodash capitalize 首字母大写
    C# 格式化百分比
    c# PadLeft,PadRight用法
    对象名 XXX 无效。
    lambda 分组后的count
  • 原文地址:https://www.cnblogs.com/john-hwd/p/10568779.html
Copyright © 2011-2022 走看看