zoukankan      html  css  js  c++  java
  • html5 访问像素值 (拾色器)

    1 <div class="wrap">
    2     <canvas id="myCanvas" width="500" height="500"></canvas>
    3 </div>
     1 function draw(id){
     2         var canvas = document.getElementById(id);
     3         if(canvas == null){
     4             return false;
     5         }
     6         var context = canvas.getContext("2d");
     7         var img = new Image();
     8         img.src = 'heng.jpg';
     9         img.onload = function(){
    10             context.drawImage(img,0,0,500,500);
    11         };
    12 
    13         canvas.onclick = function(e){
    14             var canvasX = Math.floor(e.pageX - canvas.offsetLeft);// 向下舍
    15             var canvasY = Math.floor(e.pageY - canvas.offsetTop);
    16 
    17             var imageData = context.getImageData(canvasX, canvasY, 1,1);// 获取点击的那一点的坐标
    18             var pixel = imageData.data;
    19             var pixelColor = "rgba("+ pixel[0] + ", " + pixel[1] +", "+ pixel[2] +", " + pixel[3] +")";
    20 
    21             console.log(pixelColor);
    22             document.body.style.background = pixelColor;
    23         };
    24     }
    25 
    26     draw("myCanvas");

      其中有点不明白,alpha的值不是0-1,为什么我访问pixe[3]得到的是255呢?

  • 相关阅读:
    JAVA-容器(5)-Map
    JAVA-容器(4)-Set
    数据脏读-非重复读-幻读
    JAVA-容器(3)-List
    JAVA-容器(2)-Collection
    JAVA-容器(1)
    Arrays排序
    JAVA-虚拟机(3)-调优
    zip解压缩
    rabbitMQ、activeMQ、zeroMQ、Kafka、Redis 比较
  • 原文地址:https://www.cnblogs.com/chuyu/p/3402349.html
Copyright © 2011-2022 走看看