Get pixel color from canvas, on mousemove

When using the HTML canvas element, we can use programming techniques to obtain the pixel color at the mouse position. Below is a common way to implement this functionality.

步骤1：HTML Structure

First, we need to add a <canvas> element in HTML.

html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

步骤2：JavaScript Code

Next, we need to write code in JavaScript to handle mouse events and obtain the pixel color at the mouse position.

javascript
// Get the canvas element
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Draw some colors on the canvas to provide colors for reading
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = "blue";
ctx.fillRect(70, 10, 50, 50);

// Listen for the mousemove event on the canvas
canvas.addEventListener('mousemove', function(event) {
    // Get the coordinates of the mouse on the canvas
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    // Get the pixel color at this coordinate
    const pixel = ctx.getImageData(x, y, 1, 1);
    const data = pixel.data;
    const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;

    // Log or display the color value in another way
    console.log(rgba);
});

In the above code, we first set the canvas content and bind a mousemove event that triggers when the mouse moves over the canvas. Within the event handler, we first calculate the exact mouse coordinates on the canvas. Then, we use the getImageData method to obtain an object containing pixel data, and finally extract and construct the RGBA color string.

小结

• Use the getImageData(x, y, width, height) method to obtain pixel data for a specific region.
• Mouse events (such as mousemove) can be used to capture the mouse position in real-time.
• Calculating the mouse position on the canvas requires accounting for the canvas's position and offset.

Through these steps, you can obtain the pixel color at any mouse position and use it for various applications, such as the color picker tool in drawing programs.