Canvas旋转文本工件

Question

我使用Processing.js在图像上显示一些45度旋转的文字。

问题在于，在旋转之后，文字变得难以阅读，因为文物变得可见，字母间距不恒定或字母没有相同的底线。

这是demo。

您可以看到第二个“Hello World”具有‎Ø符号，而不是e和o。 另外，在第8位，字母间距问题很明显。

有没有办法解决这个问题？至少45度旋转文字。

这是截图。我知道这似乎没什么大不了的，但最终的形象必须是完美的，这个bug真的很突出。

Answer 1

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

Chrome的文字功能目前很差（我相信来自WebKit的遗留问题）不仅仅是使用画布，而是一般情况下。当应用旋转时，这变得尤其明显。您看到的（向后）“ø”实际上是e，但由于文本引擎和舍入错误导致细节融合在一起，在这种情况下最终看起来像北欧字母。 / p>

解决方法是将要旋转的文本绘制到不应用旋转的离屏画布，然后将该画布用作绘制到应用旋转的主画布的图像。

这将产生更好的结果，并且因为使用普通的图像插值而不是文本引擎而表现更好。

一个例子可以是：

/// 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);

<强> Online demo here

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

与绘制directly as text：