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呢?

相关文章:

  • 2021-10-20
  • 2021-11-26
  • 2021-08-15
  • 2021-06-12
  • 2022-12-23
  • 2022-12-23
  • 2021-08-12
猜你喜欢
  • 2021-10-26
  • 2021-09-14
  • 2022-12-23
  • 2022-12-23
  • 2021-04-10
  • 2021-09-23
相关资源
相似解决方案