某些转换是否适用于文本而不是矩形？答案

【问题标题】：Do some transforms apply to text and not rectanges?某些转换是否适用于文本而不是矩形？
【发布时间】：2016-04-24 09:50:17
【问题描述】：

我正在使用一个在 HTML 画布上绘制的 javascript 库 (Cytoscape)。

源代码使用多种变换来解决缩放和平移等问题。

我遇到的问题是我使用context.fillText 绘制的某些文本不一致，它会根据不同的条件在屏幕上移动。

您可以将此归因于画布转换正在生效，但由于某种原因，canvas.fillRect 不受影响。

例如，如果我有两行代码：

context.fillText("aaaa", 900,900);    //Acts inconsistently, changes relative size and position
context.fillRect(920, 920, 20, 20);   //Doesn't change at all.

我缺少的画布上下文中是否有可能导致这种效果的设置，它只影响文本，而不影响fillRect？

【问题讨论】：

你有这方面的例子吗？也许是codepen 或jsfiddle？
@Ouroborus 不幸的是没有——因为我正在修改这个库的源代码，为它创建一个 jsfiddle 似乎太复杂了。但我会看看做一个沙箱，只是为了检查我对转换的理解是否正确。
我不知道 cytoscapeJS，但是原生 html5 画布转换会同样影响 fillRect 和 fillText。
@markE 是的 - 这就是让我陷入困境的原因。
(1) 确保您正在设置字体样式。 (2) 记下转换发生的时间，并始终如一地进行调用。变换。 (3) 如果阅读代码有困难，请使用调试器并单步执行

标签： javascript canvas html5-canvas cytoscape.js

【解决方案1】：

context.textAlign 和 context.textBaseline 会影响放置。

【讨论】：

这并没有解释调整大小的问题。在这一点上，我已经解决了我的问题，我可能不会再看下去了。