通过 Mousemove 从画布获取像素颜色
简介
获取下面的精确像素颜色画布上的鼠标光标可用于各种应用程序,例如图像编辑、基于像素的游戏或颜色选择工具。本文将提供一个全面的示例,帮助您完成此任务。
获取像素颜色的步骤
初始画布设置:
处理鼠标移动:
获取图像数据:
提取 RGB 值:
显示颜色:
示例代码:
下面是一个完整的示例,演示了上述步骤:
<code class="html"><canvas id="my-canvas" width="200px" height="200px"></canvas> <div id="color-info"></div></code>
<code class="javascript">const canvas = document.getElementById('my-canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.fillRect(0, 0, 100, 100); canvas.addEventListener('mousemove', (e) => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const pixelData = ctx.getImageData(x, y, 1, 1).data; const colorInfo = `RGB: (${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`; document.getElementById('color-info').innerHTML = colorInfo; });</code>
在此示例中,颜色信息 div 将显示下面像素的 RGB 颜色值鼠标光标在画布上移动时。
其他注意事项
以上是如何获取画布上鼠标光标下的像素颜色?的详细内容。更多信息请关注PHP中文网其他相关文章!