HTML5畫布 - 無法清除髒像素 - 視網膜相關

我有一個簡單的畫布，帶有一個mouseover事件。當用戶移動鼠標時，我想在事件的x，y座標上繪製單個像素（將來它會比單個像素更復雜）。本質上它就像一個自定義光標。HTML5畫布 - 無法清除髒像素 - 視網膜相關

邏輯非常簡單，如下所示。奇怪的是，儘管我正在清理舊像素位置，但留下的像素殘留很小（因爲我發佈了這個問題，我發現它與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還是非視網膜機器上。（我不是指正常的畫布反鋸齒問題）。

UPDATE：我只是測試這對我的同事非Retina的MacBook 17" 和它精美的作品完美所以這肯定似乎與Retina顯示屏

來源

2013-08-05 nogridbag

您的同事是否使用與您相同的瀏覽器？ – Optox

是的相同的確切版本。 – nogridbag

Chrome 28.0.1500.95。老實說，我沒有在其他瀏覽器中測試過。 – nogridbag

我不能完全肯定，但我認爲這可能與不同屏幕的分辨率有關，如果你曾經看過智能手機上的html5畫布，其中每平方英寸的分辨率比監視器的分辨率高得多，那麼你會看到質量會因爲網頁瀏覽器擴展100像素而大幅下降，因爲它告訴它使用的是相同的物理尺寸，最終大約在130像素左右。我認爲視網膜顯示器也是如此，因爲它使用了一個非常好的分辨率Basi cally，不同的屏幕有不同的像素尺寸比例。爲了解決這個問題，我在代碼中添加了以下內容。

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乘以你的常量。

來源

2013-08-05 15:03:38 Optox

這可能也有幫助：http://www.html5rocks.com/en/tutorials/canvas/hidpi/ – Optox

謝謝Optox。在這種情況下，window.devicePixelRatio = 2和ctx.webkitBackingStorePixelRatio = 2。所以我不認爲它會對這個問題有任何影響。將看看鏈接的文章。 – nogridbag

正確。 window.devicePixelRatio是2，ctx.webkitBackingStorePixelRatio是1.這肯定可能是問題，因爲根據文章Safari是2/2（並且在我的機器上完美地工作）。今晚我會試着解決這個問題。謝謝。 – nogridbag

HTML5畫布 - 無法清除髒像素 - 視網膜相關

回答

相關問題