Question

我自己并不吝啬javascript，但我想知道这一刻可能有没有几天。如果是的话，谁能帮帮我？

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

我希望在画布中加载不同类型的问题。

=＆GT;画布的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个问题。我想通过单击按钮将它们逐个加载到画布中。 但我无法弄清楚如何将.txt文件加载到画布中，任何人都可以帮助我吗？

提前，任何帮助都会非常适合

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();

这是一个基本想法。我想，根据文件内容，你可能想要在画布上渲染之前以某种方式处理响应文本。

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

Answer 2

您只需要1）问题列表和2）在设置新问题时重置画布：

var questionIndex = 0;
var questions = [
        "question 1",
        "question 2",
        "question 3"
    ];

function nextQuestion() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    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(questions[questionIndex++], 100, 50)// text and position
    if (questionIndex > questions.length - 1) {
        questionIndex = 0;
    }
}

...

<canvas id="myCanvas"></canvas>
<input type="button" id="btnNext" onclick="nextQuestion()" value="Next Question" />

http://jsfiddle.net/oehq2c0p/

如何将.txt加载到画布中

2 个答案:

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