Question

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

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

我知道我的浏览器支持canvas 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（）传输它？

Answer 1

也许设置填充样式，以便您看不到文字？

HTML5：Canvas上下文fillText / strokeText不绘制

1 个答案: