畫布圖像平滑

什麼是畫布圖像平滑

ctx.mozImageSmoothingEnabled = FALSE;

for webkit（或其他瀏覽器）？我需要它來消除反鋸齒，因爲我正在嘗試爲圖像獲得像素化效果。使用抗鋸齒技術，它看起來質量很差，但沒有銳利的邊緣。

來源

2010-04-19 NebNeb

你知道，像素藝術參差不齊，光滑是不好的。我正在尋找同樣的問題，並沒有找到相應的webkit。 – Omiod 2011-01-07 11:39:23

'''ctx.webkitImageSmoothingEnabled = false'''現在在Chrome中運行22 – forresto 2012-09-26 12:47:19

AFAIK沒辦法。你可能會得到相同的效果，畫出你想要的像素一個像素，但有更多的工作（嘿，如果它像線條一樣，那麼多）。

來源

2010-11-20 02:33:39

這裏有一個（近一歲）bug report in webkit。另一種可能性是創建更高分辨率的像素藝術並縮小它們。這可能會產生比升級更好的結果，但會與更高的流量需求相結合。下面

來源

2011-04-26 15:56:07

快速瀏覽一下史蒂芬報道的鏈接顯示以下更新對bug跟蹤這一問題：

對CSS3的圖像渲染「優化對比度」的建議值，已經實現「 -webkit-optimize-contrast'中的錯誤56627.現在在WebKit中，使用它將得到最近鄰居插值。

所以CSS設置-webkit-optimize-contrast看起來是答案。

來源

2011-06-07 10:43:28 douglett

Chrome現在忽略了這個：/（我猜所有的webkit） – UpTheCreek 2012-08-22 08:26:18

在屏幕上顯示圖像之前，舍入X和Y。

如果您在子像素上繪製圖像，某些瀏覽器會在顯示圖像之前嘗試消除它。

執行此操作的更快方法是使用零的二進制OR。

myObject.X = myObject.X | 0;

進行更深層次的解釋，讓我們讀這篇文章：

http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation/

這裏是四捨五入方法jsperf測試：

http://jsperf.com/math-floor-vs-math-round-vs-parseint/5

來源

2011-11-05 12:42:27 v42

似乎'myObject.X = myObject.X >> 0'是一個快一點。請注意，這兩個行爲都像'Math.floor'，而不是'Math.round' – UpTheCreek 2012-08-22 08:37:15

@UpTheCreek絕對最快：'myObject.X = ~~ myObject.X'。 [見jsperf]（http://jsperf.com/math-floor-vs-math-round-vs-parseint/110）。 – rvighne 2014-01-28 21:54:12

@rvighne：我的機器上沒有win7 chrome v32顯然：*±0.23％ 0.27％慢* – UpTheCreek 2014-01-29 15:15:59

對於<canvas>標籤，在r117635和Chrome Canary 21.0.1154.0之後的WebKit睡夢中現在有一個webkitImageSmoo thingEnabled屬性。（請注意，這僅適用於<canvas>，而不是更一般的HTML元素。）

來源

2012-05-28 21:23:37

實際上，您希望將其應用於畫布的2D上下文，而不是畫布元素本身。 'var ctx = canvas.getContext（'2d'）; ctx.webkitImageSmoothingEnabled = false;'或'ctx.mozImageSmoothingEnabled = false;' – Fritzy 2012-07-31 21:35:43

@Fritzy - Chrome 21中沒有做任何事情 – UpTheCreek 2012-08-22 08:28:24

現在在Chrome 22中運行！ – forresto 2012-09-26 12:46:28

如果你想繪製形狀不光滑的邊緣嘗試上的座標使用半像素。

將每個像素想象成一個大方塊。整數座標（0,1,2 ...）是正方形的邊緣。如果在整數座標之間繪製一個單位寬度的線條，它將重疊像素正方形的相對兩側，並且生成的線條將被畫兩個像素寬度爲的寬度。要繪製一條只有一個像素寬的線，您需要將座標移動到垂直於線方向的0.5。例如，如果試圖從（1,0）到（1,3）繪製一條直線，則瀏覽器將在 x = 1的任一側繪製一條覆蓋0.5屏幕像素的線條。屏幕無法顯示半個像素，所以它擴展線蓋一共有兩個像素：

但是，如果你試圖從（1.5,0）畫一條線（ 1.5，3），瀏覽器將利用覆蓋在X的任一側上0.5屏幕像素的線= 1.5，這導致一個真正的1象素寬的線：

來源： http://diveintohtml5.info/canvas.html

來源

2015-01-30 15:23:02

畫布圖像平滑

回答

相關問題