我可以關閉HTML <canvas>元素的抗鋸齒嗎？

Question

我玩弄<canvas>元素，畫線等。

我注意到我的對角線是反鋸齒的。我更喜歡看看我在做什麼 - 是否有任何方法可以關閉此功能？

Answer 1

對於圖片現在有context.imageSmoothingEnabled= false。

但是，沒有任何東西明確控制線條繪製。您可能需要使用getImageData和putImageData繪製自己的行（the hard way）。

Answer 2

在座標上繪製您的1-pixel線，如ctx.lineTo(10.5, 10.5)。在點(10, 10)上畫一條像素線意味着該位置的這個1像素從9.5到10.5，這導致在畫布上繪製兩條線。

如果你有很多單像素線條，並不總是需要將0.5添加到你想繪製的實際座標上的一個很好的訣竅就是在開始時對你的整個畫布進行ctx.translate(0.5, 0.5)。

Answer 3

它可以在Mozilla Firefox中完成。將此代碼添加到您的代碼中：

contextXYZ.mozImageSmoothingEnabled = false; 

在Opera中，它目前是功能請求，但希望它很快就會添加。

Answer 4

我會繪製一切使用自定義線算法，如Bresenham的線算法。看看這個JavaScript執行： http://members.chello.at/easyfilter/canvas.html

我認爲這一定會解決您的問題。

Answer 5

ctx.translate(0.5, 0.5); 
ctx.lineWidth = .5; 

有了這個組合，我可以畫出漂亮的1px細線。

Answer 6

我想補充一點，當縮小圖像和在畫布上繪圖時，我仍然遇到了麻煩，即使它在放大時沒有使用，仍然使用平滑。

我解決了使用此：

function setpixelated(context){ 
    context['imageSmoothingEnabled'] = false;  /* standard */ 
    context['mozImageSmoothingEnabled'] = false; /* Firefox */ 
    context['oImageSmoothingEnabled'] = false;  /* Opera */ 
    context['webkitImageSmoothingEnabled'] = false; /* Safari */ 
    context['msImageSmoothingEnabled'] = false;  /* IE */ 
} 

您可以使用此功能是這樣的：

var canvas = document.getElementById('mycanvas') 
setpixelated(canvas.getContext('2d')) 

也許這是有用的人。

Answer 7

它必須抗鋸齒矢量圖形

抗鋸齒是需要矢量圖形的正確的繪圖，涉及非整數座標（0.4,0.4），其所有，但很少有客戶會做。

當給定的非整數座標，畫布有兩個選擇：

• 抗鋸齒 - 油漆各地對於座標的像素以多遠整數座標是由非整數1（四捨五入錯誤）。
• Round - 對非整數座標應用一些舍入函數（例如，1.4將變爲1）。

稍後的策略將適用於靜態圖形，儘管對於小圖形（半徑爲2的圓）曲線將顯示明確的步驟而不是平滑的曲線。

真正的問題是圖形被翻譯（移動）時 - 一個像素與另一個像素之間的跳躍（1.6 => 2,1.4 => 1），意味着形狀的原點可能會與父項相關跳轉容器（不斷向上/向下和左/右移動1個像素）。

一些技巧

提示＃1：您可以通過縮放畫布軟化（或硬化）抗鋸齒（比如用X），則倒數規模（1/X）適用於幾何形狀自己（不使用畫布）。

比較（無縮放）：

與（帆布規模：0.75;手動比例：1.33）：

和（帆布規模：1.33;手動規模：0.75）：

提示＃2：如果鋸齒看起來真的是你以後的樣子，嘗試幾次繪製每個形狀（沒有擦除）。每次繪製時，抗鋸齒像素會變暗。

比較。繪製一次後：

三次拉伸後：

Answer 8

注意到一個非常有限的把戲。如果你想創建一個2色的圖像，你可以在＃000000的背景上用顏色＃010101繪製你想要的任何形狀。一旦做到這一點，你可以測試在imageData.data []每個像素，並設置爲0xFF任何值不爲0x00：

imageData = context2d.getImageData (0, 0, g.width, g.height); 
for (i = 0; i != imageData.data.length; i ++) { 
    if (imageData.data[i] != 0x00) 
     imageData.data[i] = 0xFF; 
} 
context2d.putImageData (imageData, 0, 0); 

其結果將是一個非抗鋸齒黑&白畫面。這不會是完美的，因爲會出現一些抗鋸齒功能，但這種抗鋸齒功能將非常有限，形狀的顏色非常像背景的顏色。