如何在 createjs 中将文本转换为位图？

Question

例如我有这个代码：

var text = new createjs.Text("Hello World", "Bold 10px Arial", "#000000");

我想把它变成位图。

Answer 1

也许您误解了如何使用 createJS 渲染对象？

所有内容（图像、文本、动画）都绘制在 canvas 上，这意味着它们不是作为单独的元素（如文本）存在，而是作为 'drawing' 存在。这也意味着您可以随时在图像中转换它。

您可以通过右键单击 canvas 并保存图像（如果您只需要一次）来执行此操作，或者以编程方式使用：

image.src = canvas.toDataURL('image/jpeg');

或

image.src = canvas.toDataURL('image/png'); //larger, higher quality

Answer 2

您可以使用 cache() 方法创建内容的屏幕外 canvas。

var b = text.getBounds();
text.cache(b.x, b.y, b.width, b.height, 2);

这里是一个显示缓存的示例，以及将缓存导出到 dataURL，然后用它制作图像。 http://jsfiddle.net/0wgwaLr6/

var url = text.cacheCanvas.toDataURL();
var img = document.createElement("img");
img.src = url;

How do I convert text to bitmap in createjs?