如何获取HTML5画布元素的填充颜色
How to GET fill color of HTML5 canvas element?
有一个由10000个正方形组成的网格,当光标悬停在任何一个正方形上时,其颜色都会改变,一旦鼠标光标不再位于上述正方形上,正方形的颜色就会恢复到原来的颜色。因此,为了将这些方块恢复到原来的颜色,我需要它们的填充颜色/样式。
尽管画布在实践中有图案,但网格上的颜色可能是随机的。
EDIT:该功能尚未使用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>
每次高亮显示正方形时,首先保存其原始颜色。然后,当您取消高亮显示它时,只需将颜色重新应用即可。
如果你在某个地方没有颜色值存储(例如,如果你在像素级别上随机构建板),你总是可以读取悬停的像素颜色。
相关文章:
- 如何设置html元素填充的动画
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 如何使用Javascript获取POST请求填充的元素的值
- 动画制作/减缓元素填充移除元素留下的空间
- 在页面中找不到元素的正确位置.函数未考虑填充
- 根据单击的元素填充同一页面中的表单,该元素的 ID 由 JSTL 生成
- 如何为所有子元素设置填充
- 元素填充到表的第一列中
- 如何获得带有内部元素填充的完整车身宽度
- 增加/减少滚动时的元素填充
- 使用jQuery用随机数组元素填充20个文本框
- 我可以让一个输入元素填充表格列的宽度吗?
- 用数组的元素填充提示符,并给它们编号
- 使用JavaScript动态计算元素填充
- 在选择元素填充后立即执行带有选择元素第一个选项的Javascript函数
- 在给定的纵横比下用n个元素填充网格的算法
- 使用 jQuery 使元素填充浏览器视口的整个高度
- Ajax在pre元素填充后无法从其获取数据
- 如何使画布元素填充和重新填充取决于鼠标位置
- jQuery宽度不包括内部元素填充