【canvas】获取鼠标点击位置坐标的颜色信息

oumae-kumiko

已于 2024-02-08 11:14:34 修改

阅读量426

点赞数 5

分类专栏：前端 javascript fabric.js 文章标签： javascript 前端开发语言

于 2024-02-08 11:13:11 首次发布

本文链接：https://blog.csdn.net/lijiahui_/article/details/136077387

版权

前端同时被 3 个专栏收录

66 篇文章 1 订阅

订阅专栏

javascript

30 篇文章 0 订阅

订阅专栏

fabric.js

11 篇文章 1 订阅

订阅专栏

在项目当中，要实现某业务需求例如PS魔棒功能时，则需要获取点击坐标的颜色信息。
功能不复杂，代码也很少，一看便知~~

核心API为getImageData，传入4个参数，前2个为点击坐标xy，后2个都传1；表示以当前点击位置为起点，取宽为1、高为1的像素范围信息；

<html>
  <style>
    .box {
      display: flex;
    }
    #c {
      border: 1px solid rgb(0, 0, 0);
    }
    .color {
      width: 40px;
      height: 40px;
      border: 1px solid red;
    }
  </style>
  <body>
    <div class="box">
      <canvas id="c" width="200" height="200"></canvas>
      <div>点击的颜色：</div>
      <div class="color"></div>
    </div>
    <script>
      c.width = 200;
      c.height = 200;
      var ctx = c.getContext("2d");
      var gr = ctx.createLinearGradient(0, 0, 300, 0);
      gr.addColorStop(0, "#fff");
      gr.addColorStop(0.15, "#8B00FF");
      gr.addColorStop(0.25, "#0000FF");
      gr.addColorStop(0.35, "#00FFFF");
      gr.addColorStop(0.45, "#00FF00");
      gr.addColorStop(0.55, "#FFFF00");
      gr.addColorStop(0.65, "#FF7F00");
      gr.addColorStop(0.75, "#FF0000");
      gr.addColorStop(1, "#fff");

      ctx.fillStyle = gr;
      ctx.fillRect(0, 0, 200, 200);
      c.onmousedown = function (e) {
        console.log(e.offsetX, e.offsetY);
        const imageData = ctx.getImageData(e.offsetX, e.offsetY, 1, 1);
        console.log(imageData);
        const pixelData = imageData.data;
        const color = `rgba(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]}, ${pixelData[3]})`;
        let el = document.getElementsByClassName('color')[0]
        el.style.background = color;
      };
    </script>
  </body>
</html>