【问题标题】：Get pixel color from resized canvas, on mouseover在鼠标悬停时从调整大小的画布中获取像素颜色
【发布时间】：2015-03-13 20:21:09
【问题描述】：
我已经检查了这个question，它提供了完美的答案。但我的问题略有不同。我有一个300 x 300 的画布，我正在使用css 将画布调整为200 x 60。如果我使用 css 重新调整画布的大小，我将无法获得颜色值 onmouseover。
在调整大小的小提琴中，如果您将鼠标悬停在红色或蓝色矩形的正下方，您会注意到它仍然分别显示#FF0000 和#0000FF，而它应该是#000000。那么如何使它在重新调整大小的画布上也能正常工作呢？
Fiddle：用 css 调整大小。
Fiddle：未调整大小。
【问题讨论】：
标签：
javascript
html
canvas
getimagedata
【解决方案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() 不会失败（此处未显示）。