0

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

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

 -webkit-backface-visibility: hidden;

在CSS或这个:

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

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

提前致谢。

4

1 回答 1

0

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

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

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

在这里修改小提琴

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);
于 2014-03-21T07:35:24.530 回答