1

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

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

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

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

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

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

谢谢。

4

3 回答 3

3

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

var text = "Hello";

conxtext.fillText(text, 100, 100);

alert("value: " + text);
于 2013-02-08T07:30:19.350 回答
1

好的。首先，没有办法使用当前可用的画布方法来做到这一点（或者我不知道）。一种方法是编写自己的课程，但这需要大量工作。我建议你使用像 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在这里。

于 2013-02-09T07:55:59.457 回答
0

见http://jsfiddle.net/ws5aK/

CheckContext.fillText有效，但没有这样的属性称为Text.

于 2013-02-08T07:01:18.727 回答