CanvasRenderingContext2D: textRendering 屬性
CanvasRenderingContext2D.textRendering 屬性是 Canvas API 的一部分，它為渲染引擎提供了關於在渲染文字時應最佳化何種方面的資訊。
其值對應於 SVG 的 text-rendering 屬性（以及 CSS 的 text-rendering 屬性）。
值
為瀏覽器引擎提供的文字渲染提示。它是其中的一項：
auto-
瀏覽器會在繪製文字時，對速度、清晰度和幾何精度進行有根據的猜測和最佳化。
optimizeSpeed-
瀏覽器在繪製文字時，會優先考慮渲染速度而非清晰度和幾何精度。它會停用字偶連形和連字。
optimizeLegibility-
瀏覽器在繪製文字時，會優先考慮清晰度而非渲染速度和幾何精度。這會啟用字偶連形和可選的連字。
geometricPrecision-
瀏覽器在繪製文字時，會優先考慮幾何精度而非渲染速度和清晰度。字型的某些方面（例如字偶連形）並非線性縮放。在放大係數較大時，您可能會看到不太美觀的文字渲染效果，但其大小會符合預期（既不會向上取整到作業系統支援的最近字型大小，也不會向下取整）。
該屬性可用於獲取或設定其值。
示例
在此示例中，我們使用 `textRendering` 屬性的每種支援值來顯示文字“Hello World”。透過讀取該屬性，每個情況下的值也會一併顯示。
HTML
html
<canvas id="canvas" width="700" height="220"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "20px serif";
// Default (auto)
ctx.fillText(`Hello world (default: ${ctx.textRendering})`, 5, 20);
// Text rendering: optimizeSpeed
ctx.textRendering = "optimizeSpeed";
ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 50);
// Text rendering: optimizeLegibility
ctx.textRendering = "optimizeLegibility";
ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 80);
// Text rendering: geometricPrecision
ctx.textRendering = "geometricPrecision";
ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 110);
結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-textrendering |
瀏覽器相容性
載入中…