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 |
浏览器兼容性
加载中…