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屬性。