Question

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

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

明星正在移动，但文字像蛇一样颤抖：）

Answer 1

<强>原因

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

这不仅适用于画布，也适用于CSS转换，也适用于文本。

<强>解决方案

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

以下是在评论中整合答案I linked to的一个示例。我只显示主要文本，因为它也可以作为比较器，在之前和之后：

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

<强> Result of this modification

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

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

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

优化内存使用的方法：对于文本层使用画布大小，其中文本适合精确（不要使用固定值，因为文本大小可能会因浏览器而异，根据文本呈现引擎的不同而大小和位置不同），对于明星来说也是如此，如果你同时使用一层。

希望这有帮助！

Answer 2

文本中的震动来自于在绘制文本时上下文不处于正确状态的事实：您之前只是对其进行了一些操作。

我刚刚添加了

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

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

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

编辑：事实上有两个问题在这里：1）文本旋转与星形不完全一致; 2）文本坐标的圆角使文本抖动。

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

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

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

html5画布动画，旋转文字不够流畅

2 个答案: