0

这个想法很简单，用文字创建一个星星并旋转它。

但是制作快速脚本后并不顺利 here is my fiddle

星星在移动，但文字像蛇一样颤抖:)

4

2 回答 2

2

原因

发生这种情况的原因是由于浏览器的文本渲染引擎。他们使用相同的旋转矩阵翻译文本路径中的每个点，但由于引擎的原因，您将在那里得到舍入错误，导致文本“抖动”。

这不仅发生在画布上，还发生在 CSS 转换中，包括文本。

解决方案

只需将文本渲染到画布“图层”并将其用作您旋转的图像而不是文本本身。这会将文本光栅化在其正常位置，并且转换发生在位图上，而不是大多数浏览器都可以很好地处理。

这是一个集成了我在评论中链接到的答案的示例。我只显示正文，因为它也可以用作比较器，前后：

// canvas layer
var tcanvas = document.createElement('canvas'); //tcanvas must be in global scope
var tctx = tcanvas.getContext('2d');

tcanvas.width = canvas.width;
tcanvas.height = canvas.height;

tctx.translate(250, 250);
tctx.fillStyle = "black";
tctx.font = "bold 60px Arial";
tctx.textAlign = 'center';
tctx.fillText('€ 1215,34', 0, 0);

现在图层已经准备好了，我们可以用一个 drawImage 替换文本绘制方法：

c.drawImage(tcanvas, -x, -y);

本次修改的结果

要绘制“额外”，只需将这些线也向下移动到图层创建中。请注意，示例中的 tcanvas 必须可全局访问。

如果文本的旋转速度不是故意的，只需在渲染文本之前删除第二次旋转调用即可。

提示：不要重绘渐变，星星只需将其渲染到另一层并将其作为图像旋转。这将更有效率。您还可以通过在 rotate() 本身上累积步骤并使用 setTransform 使用绝对值转换矩阵来避免保存/恢复（相对昂贵）。

优化内存使用的方法：对于文本层，使用文本完全适合的画布大小（不要使用固定值，因为文本大小可能会因浏览器的大小和位置而异，具体取决于文本渲染引擎），星号相同如果您也为此添加一个图层。

希望这可以帮助！

于 2014-04-19T11:46:14.910 回答
0

文本中的抖动来自于绘制文本时上下文未处于正确状态的事实：您之前只是对其进行了相当多的操作。

我刚刚添加了一个

c.restore();
c.save();
c.translate(x,y);

在代码的文本部分之前，文本现在牢固地挂在星星上：

http://jsfiddle.net/gamealchemist/xUr4f/1/

编辑：这里实际上有 2 个问题：1）文本旋转与星形不太一致，2）文本坐标的舍入使文本抖动。

Chrome 和 FF 都展示了 1) 当然，并且在干净的上下文中 1) 在两者上都消失了。

对于 2) ：Chrome 可以使用非整数坐标文本，但 FF 会进行舍入，这会在旋转文本上产生抖动。

我看到的唯一解决方案是在画布上“打印”文本，然后让画布旋转。我为这个小提琴中的“额外”做了它：http: //jsfiddle.net/xUr4f/4/ 与fillText相比，质量有所下降，但除非可以避免坐标舍入，否则它似乎是最好的解决方案。

于 2014-04-18T13:23:26.587 回答