HTML5：Canvas Context fillText/strokeText 不绘制答案

【问题标题】：HTML5: Canvas Context fillText/strokeText does not drawHTML5：Canvas Context fillText/strokeText 不绘制
【发布时间】：2013-05-02 03:18:30
【问题描述】：

我正在关注来自Dev.Opera 的关于 HTML5 绘画应用程序的教程，并尝试通过添加一个文本工具来改进它，该工具会在单击坐标后提示用户他们想要输入的文本。

例如用户点击坐标 100,200 ，提示将询问他们想要显示的文本，用户输入文本后，它应该在画布上绘制。

我知道我的浏览器支持画布 fillText 和 strokeText 功能，因为当我加载 this web 时，文本会显示出来。

在我遵循的教程中，Dev.Opera 在真实画布上创建了一个临时画布，以便将图像（形状和文本）绘制到临时画布上，然后通过 img_update() 方法传输到真实画布。

// This function draws the #imageTemp canvas on top of #imageView,
// after which #imageTemp is cleared. This function is called each time when the
// user completes a drawing operation.
function img_update () {
  contexto.drawImage(canvas, 0, 0);
  context.clearRect(0, 0, canvas.width, canvas.height);
}

我尝试在这样的上下文中执行 fillText：

context.fillText(textVar, x, y);
img_update();

这不会绘制文本，而：

contexto.fillText(textVar, x, y);

画得很完美。我已经扩展了程序来绘制圆、折线和填充，所有这些都可以在上下文中完美地工作，而不必在上下文中绘制它们。

如何强制在上下文中绘制文本，然后使用 img_update() 传输它？

【问题讨论】：

可能设置了填充样式以使您看不到文本？ jsbin 或其他地方的示例代码会有所帮助。
也许this 会有所帮助？
当我尝试 contexto.fillText 时，我没有更改填充的任何设置。所以这不应该是填充样式问题@akonsu
是的，我使用您的 jsbin 确认 @akonsu 是正确的。如果您在 fillText 之前添加 ctx.fillStyle="orange"，您的文本将正确绘制。
啊，没错。初始填充是带有 alpha 0 的白色，因此它不会绘制。请您或 akonsu 回答这个问题，以便我正确地为你们中的一个人投票？

标签： javascript html canvas

【解决方案1】：

也许设置了填充样式以使您看不到文本？

【讨论】：