我正在关注Dev.Opera关于 HTML5 绘画应用程序的教程,并尝试通过添加一个文本工具来改进它,该工具会在单击坐标后提示用户他们想要输入的文本。
例如,用户单击坐标 100,200 ,提示将询问他们想要显示的文本,并且在用户输入文本后,它应该在画布上绘制它。
我知道我的浏览器支持画布 fillText 和 strokeText 功能,因为当我加载这个网页时,文本会显示出来。
在我遵循的教程中,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() 传输它?