javascript - 如何将 .txt 加载到 Canvas 中

Question

我自己对 javascript 的了解还不错，但我这几天想知道这是否可能。如果是的话，谁能帮助我？

我需要构建一个单页面应用程序，并且我处于早期阶段。现在我陷入困境的部分是。

我希望将不同类型的问题加载到 Canvas 中。

=> Canvas 的java

var Question = 'questions'; //<= **this is the part that needs to be corrected**

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.font = 'italic 18px Arial';
  ctx.textAlign = 'center';
  ctx. textBaseline = 'middle';
  ctx.fillStyle = 'red';  // a color name or by using rgb/rgba/hex values
  ctx.fillText(Question,100,50)// text and position

说得更清楚一点。我有 10 个问题。我想通过单击按钮将它们一一加载到 Canvas 中。 但我不知道如何将 .txt 文件加载到 Canvas 中，有人可以帮助我吗？

提前致谢，任何帮助将不胜感激

Answer 1

您需要发出 AJAX GET 请求，加载文本文件数据，并将响应文本用作问题。像这样的事情:

var request = new XMLHttpRequest();
request.open('GET', 'question.txt', true);

request.onload = function() {
    if (request.status >= 200 && request.status < 400){
        var Question = request.responseText;
        ctx.fillText(Question, 100, 50)
    }
};

request.send();

这是一个基本的想法。我想，根据文件内容，您可能希望在 Canvas 上渲染之前以某种方式处理响应文本。

演示:http://plnkr.co/edit/3OX8xI7h43CSlcuWowQ5?p=preview