Question

我的页面中有一个摆动的div，上面有一个文本。我用css rotate和jquery做摆动动画。你可以在http://jsfiddle.net/novellino/Em7ej/

看到它

我的问题是当div开始移动时文本会变得模糊。我尝试过像添加这样的解决方案：

 -webkit-backface-visibility: hidden;

在css或者这个：

 -webkit-transform-origin: 50%  51%;

但仍然无效。有谁知道我是否以及如何解决这个问题？

提前致谢。

Answer 1

这是来自浏览器中文本呈现引擎的工件。文本不会被缓存，而是针对每个更改进行渲染，从而导致每个单独的点被转换（旋转）。不准确和舍入错误会导致渲染有些不一致。

要避免此问题，您可以先将文本渲染为图像，然后再使用该图像。您可以通过两种方式执行此操作：

预渲染离线并使用
实时渲染文字using a canvas element

这具有增加性能的额外好处。

<强> Modified fiddle here

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = 90;
canvas.height = 90;

ctx.fillStyle = '#613a1c';
ctx.font = '16px serif';
ctx.textBaseline = 'top';
ctx.fillText('Hello', 20, 20);
ctx.fillText('I am the', 20, 38);
ctx.fillText('text', 20, 56);

document.getElementById('info_txt').appendChild(canvas);

使用css转换和旋转时的模糊文本

1 个答案: