HTML5 画布：透视文本答案

【问题标题】：HTML5 canvas: Text in perspectiveHTML5 画布：透视文本
【发布时间】：2013-09-30 19:06:02
【问题描述】：

我正在尝试创建我的第一个 HTML5 游戏。我会搜索几个小时，比如留下文本 persperctiva（用于画布）。

见附件我需要什么。是否需要将文本中的两个“点”修改为我需要的效果。图片：https://pbs.twimg.com/media/BVbuU1PCUAA7d8a.png

PS：我设法只留下文字“旋转”（基本），这不符合我的目的。

我发现的所有主题都是不可能的。

【问题讨论】：

“我发现的所有主题都是不可能的。” 任何事情都是可能的:)
@Cristy Adidas 是你吗？
我宁愿说： Context2d 性能不错，这是不可能的。仅当文本为动画时才重要。如果是动画 webGL 是一种解决方案，但浏览器支持有限 (caniuse.com/webgl)
@GameAlchemist 正如我在另一个答案中所说的那样。在这种情况下，最好用已经“下降”的数字创建图像并制作一个脚本来显示它们？（创建 10 个编号为 0-9 的图像）

【解决方案1】：

Canvas 的 2d 上下文无法执行链接中显示的非并行转换。

要进行类似透视的变形，您需要使用画布 3d 上下文 (webGL)。

另外，这里有一篇关于如何将像素从原始三角形插入到扭曲三角形的帖子：

这将允许您“手动”在 2d 上下文中进行透视变形。

【讨论】：

此示例集仅适用于图像？需要用文本来做到这一点......缺少这一点，我认为将所有数字创建为已经“格式化”的图像而不是 3D 的成本会更低。你有什么看法？
在画布形状中，文本和图像都是一样的……只是画布上的像素。如果您只想透视扭曲文本而不是图像，您可以使用第二个屏幕外画布扭曲文本像素，然后将这些透视文本像素绘制到主画布上。以下是合并辅助画布的方法： mainContext.drawImage(secondaryCanvas,x,y);您提到“已将数字格式化为图像”。如果这意味着在 Photoshop 等图像编辑器中扭曲数字并在画布上绘制这些图像，那么我的意见是这样做——更容易，也许质量也更好！

【解决方案2】：

看起来并没有涉及太多视角，所以你可能会通过一个简单的偏差来逃脱：

var angle = -0.2;
context.setTransform(1, 0, angle, 1, 0, 0);
context.drawImage(img, 100, 0, 350, 100);

【讨论】：

此示例也仅用于图像。进行旋转与搜索仍然有点不同（我需要了解木桌上的文字）。使用 EaselJS: new createjs.Text("Hello", "36px Arial", "#777"); text.rotation = 3;