This article was first published on my personal blog nikolaus Liu. top

When LEARNING canvas related API on MDN, I saw a demo(picture below) which is a little similar to the color picker I usually use. So I thought, can canvas be used as a color picker? After careful thought, the answer is yes, and made a simple demo (double click pick up color). Here is the idea of a simple record.

Let’s start with an example on MDN

Paste code directly

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i=0; i<6; i++){for (var j=0; j<6; j++){ ctx.fillStyle ='rgb(' + Math.floor(25542.5*i) + ', ' + 
                       Math.floor(25542.5*j) + ', 0) ';
      ctx.fillRect(j*25,i*25.25.25); }}}}Copy the code

The example code uses a for-for-loop to define the background colors of 36 small rectangles in 6×6 (ctx.fillstyle) and draws them out (ctx.fillrect).

FillRect (x, y, width, height) and ctx.fillRect(j*25, I *25,25,25); It follows that the I in the for loop controls the drawing of the rectangle along the Y-axis. J controls the drawing of the giant star along the X-axis. This is very important and will be used later to add code to the example above (PS: have a good mind mapping software is recommended, XMind is not suitable for drawing the following, and do not want to open Photoshop, so I used drawing software…). .

Demand analysis

Now to realize the function of the color picker, nothing more than clicking on the above rectangular small color block, get the corresponding color value of the current click area. Further subdivision is to achieve two functions:

  1. Save the position and color information of each small rectangle. This can be done with a two-dimensional array or an array of objects (let’s call it that). I’m using the latter because the semantics are a little clearer.
  2. Determine which rectangle the click area belongs to based on the position of the mouse click, and extract the corresponding color value from the two-dimensional array/object array saved above.

Begin to implement

Achieve the first point

// Initialize an array to hold the position and color information of a small rectangle
var arr = [];
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i=0; i<6; i++){for (var j=0; j<6; j++){ ctx.fillStyle ='rgb(' + Math.floor(25542.5*i) + ', ' + 
                       Math.floor(25542.5*j) + ', 0) ';
      ctx.fillRect(j*25,i*25.25.25);
      // Save each rectangle you draw
      arr.push({
        x1: 25 * j,       // The top left x-coordinate of the rectangle
        y1: 25 * i,       // The top left y coordinate of the rectangle
        x2: 25 * j + 25.// The lower right x-coordinate of the rectangle
        y2: 25 * i + 25.// The bottom right corner of the rectangle is the y coordinate
        // Rectangle color
        color: 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' + Math.floor(255 - 42.5 * j) + ', 0) '}); }}}}Copy the code

The position and color information of each rectangle is then wrapped into an object and pushed into the array. The first point is done.

Implement the second point

The mouse position information is available on the MouseEvent object, e. clientx and e. clienty, respectively.

canvas.addEventListener('dblclick'.function (e) {
  var x = e.clientX;
  var y = e.clientY;
  for (var i = 0; i < arr.length; i++) {
    if (x >= arr[i].x1
      && x < arr[i].x2
      && y >= arr[i].y1
      && y < arr[i].y2) {
        // Get the color
        console.log(arr[i].color); }}},true);Copy the code

To simplify the calculation, I set body {margin: 0; }, the actual situation may not be so ideal.

The complete code has handling of conversion between RGB color values and hexadecimal color values.

conclusion

The above is just a simple record of the idea of color pickup, the real color pickup is far more than such a little color, and the color is gradual transition, more fine grained, so the selection of the range of judgment should be a little more complex. It will be updated if there is any sorting afterwards.