Question

有10,000个正方形的网格，当光标悬停在任何一个正方形上时，其颜色应该改变，并且一旦鼠标光标不再在上述正方形上方，正方形的颜色应恢复到其原始颜色。因此，要将这些方块恢复为原始颜色，我需要填充颜色/样式。

虽然画布在实践中有一个图案，但网格上的颜色可能是随机的。

编辑：使用getImageData（）仍未实现该功能，代码已使用该函数编写。

以下是代码：

＆＃13;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
var x = 0,
  i = 0;
var y = 0,
  j = 0;
slotSize = 10;
for (x = 0, i = 0; i < 100; x += slotSize, i++) {
  for (y = 0, j = 0; j < 100; y += slotSize, j++) {
    if ((Math.floor(i / 10)) % 2 == 0 && (Math.floor(j / 10)) % 2 == 0) //required for creating the pattern
    {
      ctx.fillStyle = "red"
    } else {
      ctx.fillStyle = "yellow";
    }
    ctx.strokeRect(x, y, slotSize, slotSize);
    ctx.fillRect(x, y, slotSize, slotSize);
  }
}

function getCursorPosition(canvas, event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;
  return {
    x: x,
    y: y
  }
}
var basex = 20,
  basey = 20;

function occupy(style, row, col) {
  console.log("occupy called with" + style)
  ctx.fillStyle = style;
  cx = slotSize * row;
  cy = slotSize * col;
  ctx.fillRect(cx, cy, slotSize, slotSize);
  ctx.strokeRect(cx, cy, slotSize, slotSize);
}
var row = 0,
  col = 0;

function highlight(event) // 
  {
    var coords = getCursorPosition(canvas, event);
    var x = coords.x;
    var y = coords.y;
    if (row != Math.floor(x / slotSize) || col != Math.floor(y / slotSize)) {
      var color = getColor(row, col); //working errantly
      occupy(color, row, col); //<--- problem line used to get the orginal color of boxes back
      row = Math.floor(x / slotSize); //to truncate to int since all number are float by default
      col = Math.floor(y / slotSize);
      document.getElementById("info").innerHTML = x + "," + y + "  " + row + "," + col;
      occupy("#ffffff", row, col); // highlighting color
    }
  }

function getColor(row, col) {
  var x = slotSize * row;
  var y = slotSize * col;
  var dat = ctx.getImageData(x, y, 1, 1);
  console.log(dat.data[0] + " " + dat.data[1] + " " + dat.data[2]);
  var color = "#" + rgbToHex(dat.data[0], dat.data[1], dat.data[2]);
  return color;
}

function rgbToHex(r, g, b) {
  if (r <= 255 && g <= 255 && b <= 255) {
    rh = r.toString(16);
    gh = g.toString(16);
    bh = b.toString(16);
    while (rh.length < 2) {
      rh = "0" + rh;
    }
    while (gh.length < 2) {
      gh = "0" + gh;
    }
    while (bh.length < 2) {
      bh = "0" + bh;
    }
    color = rh + gh + bh;
    console.log(color + " " + rh + " " + gh + " " + bh);
    return color;
  } else
    console.log("invalid color values" + r + " " + g + " " + b);
}

function clear(event) {
  var coords = relMouseCoords(event);
  row = (coords.x / slotSize);
  col = (coords.y / slotSize);
  occupy("#ffffff", row, col);
}
document.getElementById("b").setAttribute("onClick", "occupy('red',1,2)");
document.getElementById("canvas").setAttribute("onmousemove", "highlight(event)");
document.getElementById("canvas").setAttribute("onmouseout", "clear(event)");

＆＃13;

<table>
  <tr>
    <td>
      <canvas id="canvas" width="1000" height="1000" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
      </canvas>
    </td>
    <td>
      <button id="b">fill</button>
      <p id="info"></p>
    </td>
  </tr>
</table>

＆＃13;

Answer 1

每次突出显示正方形时，首先保存其原始颜色。然后，当您取消突出显示它时，只需将颜色应用回来。

如果您在某处没有色值存储（例如，如果您在像素级别上随机构建电路板），则可以随时读取悬停像素颜色。

如何获取HTML5 canvas元素的填充颜色？

1 个答案: