我可以關閉 HTML<canvas> 上的抗鋸齒功能元件？

問題描述

我正在玩<canvas> 元素，繪製線等。

我注意到我的對角線是抗鋸齒的。我喜歡看起來像我在做什麼 – 有沒有辦法關閉這個功能？

最佳解決方案

對於影像，現在有 context.imageSmoothingEnabled = false 。

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

次佳解決方案

在 ctx.lineTo(10.5, 10.5)座標上繪製 1-pixel 線。在 (10, 10)點繪製 one-pixel 線，意味著該位置的 1 畫素從 9.5 到 10.5，這樣可以在畫布上繪製兩條線。

一個很好的技巧，不總是需要將 0.5 新增到您想要繪製的實際座標，如果你有很多 one-pixel 線，就是 ctx.translate(0.5, 0.5)你的整個畫布在開始。

第三種解決方案

可以在 Mozilla Firefox 中完成。將其新增到您的程式碼中：

contextXYZ.mozImageSmoothingEnabled = false;

在 Opera 中，它目前是一個功能請求，但希望很快新增。

第四種方案

我想補充說，當縮小影像尺寸並在畫布上繪製時，我遇到了麻煩，它仍然使用平滑，即使在升序時不使用它。

我解決了這個：

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'))

也許這對某人有用

第五種方案

它必須反對向量圖形

對於正確繪製涉及 non-integer 座標 (0.4,0.4) 的向量圖形，需要進行抗鋸齒，所有這些座標除了極少的客戶端都能做。

當給出 non-integer 座標時，畫布有兩個選項：

Antialias – 繪製座標周圍的畫素相對於 non-integer 一個整數座標的距離 (舍入誤差) 。
回合 – 將一些舍入函式應用於 non-integer 座標 (例如，1.4 將變為 1) 。

後來的策略將適用於靜態圖形，雖然對於小圖形 (半徑為 2 的圓) 曲線將顯示清晰的步驟，而不是平滑曲線。

真正的問題是當圖形被翻譯 (移動) 時 – 一個畫素與另一個畫素之間的跳躍 (1.6 => 2，1.4 => 1) 意味著形狀的原點可能會相對於父容器不斷地向上/向下移動 1 個畫素，左/右) 。

一些技巧

提示＃1：您可以透過縮放畫布 (透過 x 表示) 來軟化 (或硬化) 抗鋸齒，然後將自變數 (1 /x) 應用於幾何圖形 (不使用畫布) 。

比較 (無縮放)：

與 (畫布尺度：0.75; 手動刻度：1.33)：

和 (畫布比例：1.33; 手動刻度：0.75)：

提示＃2：如果一個鋸齒狀的外觀真的是你以後，嘗試繪製每個形狀幾次 (不擦除) 。每個畫面，抗鋸齒畫素變暗。

比較。繪製一次後：

畫三次後：

第六種方案

我將使用 Bresenham 線演演算法的自定義線演演算法繪製所有內容。檢視這個 javascript 實現：http://members.chello.at/easyfilter/canvas.html

我想這肯定會解決你的問題。

第七種方案

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

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

參考文獻

Can I turn off antialiasing on an HTML <canvas> element?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

我可以關閉 HTML<canvas> 上的抗鋸齒功能元件？