JavaScript / HTML5 - 获取画布对象文本？

Question

我正在使用javascript / html并尝试从已在页面上创建的画布对象中获取文本。

我想在页面加载后单击一个按钮，然后从画布对象中查看文本。 这是我正在尝试的代码。

var CheckCanvas = document.getElementById(className);
var CheckContext = CheckCanvas.getContext('2d');

alert( 'btn text: ' + CheckContext.Text );

我也尝试获取'fillText'属性，但我无法从对象中获取文本。

任何帮助将非常感激。 我确信它很简单，但我找不到解决方案。

谢谢。

Answer 1

您无法从画布对象获取文本，因为它是图像。但是，您可以在绘制之前将文本存储在变量中，然后稍后输出。

var text = "Hello";

conxtext.fillText(text, 100, 100);

alert("value: " + text);

Answer 2

好的。 首先，没有办法使用当前可用的canvas方法（或者我不知道它）。 一种方法是编写自己的类，但这是一项很多工作。 我建议您使用像kineticjs或fabricjs这样的画布库，这样可以很容易地实现这样的功能。 这是一个如何使用fabricjs来做到这一点的例子。

<canvas id="canvas1"></canvas>
<button id="addtext">Add Text </button>
<button id="retText">Retrive Text </button>

var canvas = new fabric.Canvas('canvas1');

document.getElementById('addtext').onclick = function() {
    var textVar = new fabric.Text("Hello World!");
    textVar.left=100;
    textVar.top=100;
    canvas.add(textVar);

  };
document.getElementById('retText').onclick = function() {
     var activeObject = canvas.getActiveObject();
      if (activeObject && activeObject.type === 'text') {
        alert(activeObject.text);
      }
    else
    {
        alert ("No object selected or Selected object not text");
    }
  };

jsFiddle在这里。

Answer 3

见http://jsfiddle.net/ws5aK/

CheckContext.fillText有效，但没有名为Text属性。