javascript - 画布旋转的文本工件

Answer 1

我无法提供特定的处理解决方案，但如果您对通用答案没问题，您可以执行以下操作，然后可能将其与处理集成：

Chrome 的文本功能目前很差（我相信是 WebKit 的遗留问题），不仅是画布，而且总的来说。当应用旋转时，这一点变得特别明显。您看到的（向后）“ ø”实际上是，e但是由于糟糕的文本引擎和舍入错误，细节融合在一起，在这种情况下最终看起来像北欧字符。

一种解决方法是将要旋转的文本绘制到未应用旋转的屏幕外画布上，然后将该画布用作绘制到应用旋转的主画布的图像。

这将产生更好的结果，并且由于使用普通图像插值而不是文本引擎，因此性能也更好。

一个例子可以是：

/// draw text to off-screen canvas
osCtx.font = '12px arial';
osCtx.textBaseline = 'top';
osCtx.fillText(txt, 0, 0);

/// draw off-screen canvas rotated to main canvas
ctx.translate(w * 0.5, h * 0.5);
ctx.rotate(0.5);
ctx.drawImage(osCanvas, 0, 0);

在线演示在这里

这将导致相同的文本看起来像这样：

与直接绘制为文本相比：