如何使用javascript canvas上的按钮循环访问文本列表

这是我在stackoverflow上的第一个问题。我对JavaScript还是有点新，我正在尝试做一个简单的互动故事。有一列我想要经历的句子。每个句子将显示在画布上，并且一个按钮将移动到下一句。我尝试过使用一些不同的解决方案，但是当我按下“下一步”按钮时，画布不会改变。我已经在代码中调用增量函数（plusOne）来测试函数是否真正起作用并且它确实起作用。看起来问题在于按钮。这里的帆布和按钮：如何使用javascript canvas上的按钮循环访问文本列表

<canvas id="myCanvas" width="480" height = "320"></canvas> 
<button onclick = "plusOne()">Next</button>

这里的函数和变量

const plusOne =() =>{ 
lineMarker++; 
} 

//making a list of words and getting font 
var myLines = ["Hello and welcome", 
      "How are you doing?", 
      "I'm doing quite well thank you"] 

var lineMarker = 0;

我叫Plusone精选（）函数的4倍只是为了检查画布显示lineMarker的价值为4，它做了！这里是代码，画到画布上线：

ctx.fillText(myLines[lineMarker%3], 8, 250); 
ctx.fillText(("Line number is: "+lineMarker.toString()), 10,80);

画布显示lineMarker的价值，这是在列表中的句子。但是，该按钮并没有增加值，我曾尝试在JavaScript中做出单独的按钮，但也失败了。我很久没有提出问题了，因为我担心我可能会错过一些显而易见的事情，但迟早我会弄清楚，但是论坛和教程让我相信问问周围，所以我就在这里！任何人都知道如何解决这个问题？

来源

2017-08-15 user6604322

检查下面的答案。这是你在寻找什么，如果是的话，你明白发生了什么？ –

你正在接近一些小的变化。

首先，您需要更新plusOne函数中的画布。

您还需要从以前fillText清除画布

var lineMarker = 0; 
 

 
var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 

 
const plusOne =() => { 
 

 
    lineMarker++; 
 
    ctx.clearRect(0, 0, c.width, c.height); 
 
    ctx.fillText(myLines[lineMarker % 3], 8, 250); 
 
    ctx.fillText(("Line number is: " + lineMarker.toString()), 10, 80); 
 
} 
 

 
//making a list of words and getting font 
 
var myLines = ["Hello and welcome", 
 
    "How are you doing?", 
 
    "I'm doing quite well thank you" 
 
]; 
 

 
ctx.fillText(myLines[lineMarker % 3], 8, 250); 
 
ctx.fillText(("Line number is: " + lineMarker.toString()), 10, 80);

<canvas id="myCanvas" width="480" height = "320"></canvas> 
 
<button onclick = "plusOne()">Next</button>

来源

2017-08-15 20:46:05

现在工作完美！非常感谢你！ – user6604322

如何使用javascript canvas上的按钮循环访问文本列表

回答

相关问题