在项目当中，要实现某业务需求例如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>
