Canvas旋转文本工件

本文介绍了Canvas旋转文本工件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用 Processing.js 在图片上显示45度旋转文字。

问题是

这里是一个

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

与绘制的直接作为文字：

I use Processing.js to display some 45 degrees rotated text on an image.

The problem is that after roation the text becomes hard to read as artifacts become visible, letter spacing is not constant or letters do not have the same bottom line.

Here is a demo.

You can see that the second "Hello World" has the ‎Ø sign instead of e and o. Also, at 8th the letter spacing problem is obvious.

Is there a way to fix this? At least for 45 degrees rotated text.

Here's a screenshot. I know that here seems like it's not of a big deal, but the final image has to be perfect and this bug really stands out.

解决方案

I can't give a specific solution for processing but if you are ok with a generic answer you can do the following and then possibly integrate that with processing:

Chrome's text ability is currently poor (I believe a left-over from WebKit) not just with canvas but in general. This becomes especially visible when rotation is applied. The (backward) "ø" you see is in fact the e but due to the poor text engine and rounding errors the details melts together and it ends up looking like a Nordic char in this case.

A work-around is to draw the text you want to rotate to an off-screen canvas with no rotation applied, then use that canvas as an image that you draw to your main canvas to which rotation is applied.

This will produce a much better result and also perform better as normal image interpolation is used instead of the text engine.

An example can be:

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

Which will result in the same text looking like this instead:

versus drawn directly as text: