jquery - 使用 css 过渡和旋转时文本模糊

Question

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

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

 -webkit-backface-visibility: hidden;

在CSS或这个：

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

但仍然无法正常工作。有谁知道我是否以及如何解决这个问题？

提前致谢。

Answer 1

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

为避免此问题，您可以先将文本渲染为图像，然后再使用它。您可以通过两种方式做到这一点：

• 离线预渲染并使用它
• 使用画布元素实时呈现文本

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

在这里修改小提琴

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