我有一个带有mouseover事件的简单画布。当用户移动鼠标时，我想在事件的x，y坐标处绘制单个像素（将来它将比单个像素更复杂）。从本质上讲，它就像一个自定义光标。
逻辑非常简单，如下所示。奇怪的是，尽管我正在清理旧的像素位置，但仍有少量像素残留（因为我发布了这个问题，所以我发现它与Retina显示屏有关）。我已经能够解决此问题。我没有保存1px并还原1px，而是保存了3px并还原了3px。但是我不明白为什么需要这样做，并且将来在绘制更复杂的光标时，我希望脏像素的处理更加精确。
这是一个可运行的JSFiddle示例：http : //jsfiddle.net/sbCq3/2/
// cleanup previously drawn pixel
ctx.putImageData(lastImageData, lastImageX, lastImageY);
// save the imageData currently at x,y
lastImageData = ctx.getImageData(x, y, 1, 1);
lastImageX = x;
lastImageY = y;
// draw the dot
var dotData = ctx.createImageData(1, 1);
...
ctx.putImageData(dotData, x, y);
我有点难过。我想知道是否与我的Retina显示器有关。如果以5,5绘制单个像素，则它是图像数据中的单个像素-但我可以使用DigitalColor Meter（内置缩放工具）进行缩放，然后看到单个像素被细分并进行了抗锯齿处理。而如果我在Windows机器上查看该像素，那将是一个不错的实心像素。我还没有测试过是否在Windows或非视网膜计算机上出现此问题。（我不是在指普通的画布抗锯齿问题）。
更新：我刚刚在我的同事们的非视网膜MacBook 17“上测试了它，它工作得非常好。因此，这显然与视网膜显示屏有关。
我不确定，但是我认为这可能与不同屏幕的分辨率有关。如果您曾经在智能手机上看过html5画布，而每张html5画布的分辨率都比显示器大得多，那么您会发现质量大大降低了，因为Web浏览器将显示的像素扩展了100px使用相同的物理尺寸，最终约为〜130px。我认为您的视网膜显示器也会发生同样的情况，因为它使用了疯狂的良好分辨率。基本上，不同的屏幕具有不同的像素大小比率。为了解决这个问题，我在代码中添加了以下内容。
var PIXEL_RATIO = (function() {
var ctx = document.createElement("canvas").getContext("2d"),
dpr = window.devicePixelRatio || 1,
bsr = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backignStorePixelRatio || 1;
return dpr / bsr;
})();
现在，无论何时制作画布或绘制任何东西，都应将常量乘以变量PIXEL_RATIO。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句