This post explores how you can retrieve the RGB values of the pixel under the mouse cursor while moving over a canvas element. We'll provide a comprehensive approach with a self-contained example.
To achieve this, first create a canvas with the desired dimensions:
<code class="html"><canvas id="example" width="200" height="60"></canvas></code>
Fill the canvas with elements such as squares:
<code class="js">const example = document.getElementById('example'); const ctx = example.getContext('2d'); ctx.fillStyle = randomColor(); ctx.fillRect(0, 0, 50, 50); ctx.fillStyle = randomColor(); ctx.fillRect(55, 0, 50, 50); ctx.fillStyle = randomColor(); ctx.fillRect(110, 0, 50, 50);</code>
Finally, add the mousemove event handler that captures the pixel values at the cursor's position:
<code class="js">$('#example').mousemove(function(e) { // Calculate the position relative to the canvas const pos = findPos(this); const x = e.pageX - pos.x; const y = e.pageY - pos.y; const coord = `x=${x}, y=${y}`; // Get the pixel value const c = this.getContext('2d'); const p = c.getImageData(x, y, 1, 1).data; // Convert to hex format const hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); // Display the color information $('#status').html(coord + "<br>" + hex); });</code>
This code relies on supporting functions for finding the element's position and converting RGB values to hex. Define these functions as follows:
<code class="js">function findPos(obj) { let curleft = 0, curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return { x: curleft, y: curtop }; } return undefined; } function rgbToHex(r, g, b) { if (r > 255 || g > 255 || b > 255) throw "Invalid color component"; return ((r << 16) | (g << 8) | b).toString(16); } function randomInt(max) { return Math.floor(Math.random() * max); } function randomColor() { return `rgb(${randomInt(256)}, ${randomInt(256)}, ${randomInt(256)})`; }</code>
Visit the following link to see the full example in action:
https://bl.ocks.org/wayneburkett/ca41a5245a9f48766b7bc881448f9203
The above is the detailed content of How to Get the Pixel Color from a Canvas on Mousemove?. For more information, please follow other related articles on the PHP Chinese website!