如何獲取HTML5 canvas元素的填充顏色？

Question

有10,000個正方形的網格，當光標懸停在任何一個正方形上時，其顏色應更改，並且一旦鼠標光標不再位於上述正方形上，則正方形的顏色應恢復為原始顏色。 因此，要將這些正方形恢復為原始顏色，我需要其填充顏色/樣式。

盡管實際上帆布具有圖案，但網格上的顏色可能是隨機的。

編輯：使用getImageData（）仍未實現功能，已使用該函數編寫了代碼。

這是代碼：

 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)"); 

 <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> 

Answer 1

每次突出顯示正方形時，首先要保存其原始顏色。 然后，取消突出顯示時，只需將顏色套回即可。

而且，如果您在某處沒有顏色值存儲區（例如，如果您在像素級上隨機構建電路板），則始終可以讀取懸停的像素顏色。