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

Question

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

在重新调整大小的 fiddle 中，如果您将鼠标悬停在红色或蓝色矩形的正下方，您会注意到它仍然分别显示 #FF0000 和 #0000FF，而它应该是 #000000。那么如何使它在重新调整大小的情况下也能正常工作 canvas?

Fiddle：使用 css 调整大小。

Fiddle: 未调整大小。

Answer 1

您需要在鼠标处理程序方法中应用比例因子。比例因子是你的canvas的位图（实际大小）和元素大小（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() 就不会失败（此处未显示）。

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

Get pixel color from resized canvas, on mouseover

html

javascript

canvas

getimagedata

例如：