Question

我已经检查了这个question，它提供了完美的答案。但我的问题略有不同。我有一张300 x 300的画布，我正在使用css到200 x 60重新调整画布大小。如果我使用css重新调整画布大小，我将无法获得颜色值onmouseover。

如果你将鼠标放在红色或蓝色矩形的正下方，你会注意到它仍然显示#FF0000＆amp; #0000FF分别为#000000。{{1}}。那么即使使用重新调整大小的画布，如何使其工作呢？

Fiddle：使用css重新调整大小。

Fiddle：未重新调整大小。

Answer 1

您需要在鼠标处理程序方法中应用比例因子。比例因子是画布的位图（实际大小）和元素大小（CSS大小）之间的关系。

例如：

// find scale:
var sx = example.width / parseInt(example.style.width, 10);
var sy = example.height / parseInt(example.style.height, 10);

// apply to x/y
x = (x * sx)|0;  // scale and cut any fraction to get integer value
y = (y * sy)|0;

<强> Updated fiddle

此外，代码需要对坐标进行一些边界检查，以便getImageData()不会失败（此处未显示）。

在鼠标悬停时从调整大小的画布获取像素颜色

1 个答案:

例如：