JavaScriptのキャンバスのボタンを使用してテキストのリストを循環させる方法

Question

これは私の最初の質問stackoverflowです。私はまだ少しjavascriptに新しいですし、私は簡単なインタラクティブな話をしようとしています。 私は行きたい文のリストがあります。各文章はキャンバスに表示され、ボタンは次の文に移動します。いくつかのソリューションを試してみましたが、[次へ]ボタンを押してもキャンバスが変わらないです。 関数が実際に動作しているかどうかをテストするコードの間にインクリメント関数（plusOne）を呼び出しました。問題はボタンと関連しているようです。 はここキャンバスとボタンです：

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

ここで私は、ちょうどキャンバスは4としてlineMarkerの値を表示することを確認するためにプラスワン（）関数を4回呼び出された関数や変数

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; 

ですそれはした！

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

キャンバスがlineMarkerの値を表示し、リストの中だ文： そして、ここでは、キャンバスに描くコードの行です。 しかし、ボタンは値をインクリメントしていないので、JavaScriptで別のボタンを作ろうとしましたが、これも機能しませんでした。 私は長い間質問をしていました。私が何かを完全にはっきりと見分けることができない恐れがありますが、フォーラムやチュートリアルで尋ねることができました。 これをどのように並べ替えるか知っていますか？

Answer 1

ほとんど変更がありません。

まず、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>