在Chrome中爲<canvas>禁用DirectWrite和ClearType

我需要將字體呈現到畫布上，而不使用任何消除鋸齒或ClearType。然後，我需要按照整數因子將這些縮放到另一個畫布上，而不進行任何平滑處理。在Chrome中爲<canvas>禁用DirectWrite和ClearType

從小畫布縮放到大畫布可以正常工作（通過在2D上下文中設置imageSmoorthingEnabled = false），但是我無法解決如何禁用消除鋸齒/ ClearType而不禁用整個瀏覽器和OS。

如果我不在操作系統中禁用ClearType，並且禁用Chrome中的DirectWrite（chrome：// flags＃disable-direct-write），我會按照下面的第一張圖片得到結果。對於這兩個禁用，我得到所需的效果 - 請參閱第二個鏈接。在

DirectWrite/ClearType on

的DirectWrite /的ClearType的DirectWrite /關閉ClearType的

雖然我有一種變通方法，我真的在尋找一種方式來禁用這些功能僅限於畫布級別，因此我們無需要求用戶對其進行更改其操作系統和瀏覽器設置。

我不需要跨瀏覽器解決方案，Chrome首選。

我的測試開發environtment是Windows 7的64 +的Chrome版本49.0.2623.28的β-M（64位）

**編輯：添加了一個例子說明爲什麼第一個答案沒有解決的問題：

示例位圖字體是21px。請注意，如果我們以該尺寸渲染它，然後放大10倍，仍然可以看到平滑/消除鋸齒。

@font-face { font-family: "vcr-osd-mono"; src: url("https://dl.dropboxusercontent.com/s/hsdwvz761xqphhb/pixel.ttf"); } canvas { font-family: vcr-osd-mono -webkit-font-smoothing: none; }

<body onload=" var ctx = canvas.getContext('2d'); ctx.font = '21px vcr-osd-mono'; ctx.textBaseline = 'top'; ctx.fillText(' ', 0, 0); "> <button onclick=" var ctx = canvas.getContext('2d'); ctx.font = '21px vcr-osd-mono'; ctx.textBaseline = 'top'; ctx.fillText('TESTING', 0, 0); var ctx2 = canvas2.getContext('2d'); ctx2.imageSmoothingEnabled = false; ctx2.scale(10,10); ctx2.drawImage(canvas, 0, 0); ">Click</button><br/> <canvas id="canvas" width="100" height="30"></canvas><br/> <canvas id="canvas2" width="1000" height="300"></canvas><br/> </body>

來源

2016-02-05 KentW

你已經找到了解決呢？ – Diego

我不認爲有什麼辦法從JS禁用字體反鋸齒。

但是因爲您似乎想要一些像素化字體，爲什麼不簡單地搜索/創建一些bitmap font並直接將其繪製到主畫布上？

然後，你只需要重新繪製你的整個畫布圖紙到第二個，其中包括fillText()

window.onload = function() { 
 
    setTimeout(function() { 
 
    var ctx = canvas.getContext('2d'); 
 
    ctx.scale(10, 10) 
 
    ctx.font = "10px vcr-osd-mono"; 
 
    ctx.textBaseline = "top"; 
 
    ctx.fillText('I am pixellated', 0, 0); 
 
    }, 1000); 
 
};

@font-face { 
 
    font-family: "vcr-osd-mono"; 
 
    src: url("https://dl.dropboxusercontent.com/s/hsdwvz761xqphhb/pixel.ttf"); 
 
} 
 
* { 
 
    font-family: 'vcr-osd-mono'; 
 
}

<canvas id="canvas" width="950" height="150"></canvas>

來源

2016-02-05 10:10:27 Kaiido

不幸的是，這仍然無法正常工作。我已經添加了原始問題的代碼來解釋原因。 – KentW

@KentW編輯過，以包含您需要在放大的畫布上重新繪製（再次調用繪圖命令）的事實，而不是調用drawImage。 – Kaiido

在Chrome中爲<canvas>禁用DirectWrite和ClearType

回答

相關問題