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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。