javascript - 如何使用调用函数的按钮移动 Canvas 中的文本以使文本显示在 Javascript 中？

Question

我的 HTML id="myCanvas" 中有一个 Canvas ，单击按钮时会调用此函数:

function writeCanvas(){
     var can = document.getElementById("myCanvas");    
     var ctx = can.getContext("2d"); 
     var xPos = 50;
     var yPos = 50;

     window.addEventListener('click', moveIt, true);

     ctx.fillStyle= "red";
     ctx.font = "30px Arial";
     ctx.fillText("Kunal Sharma", xPos, yPos); 
}

如何使每次单击按钮时文本向右或向下移动？

Answer 1

这是一个简单的例子:

<button onclick="drawText()">Move Text</button><br>
<canvas id="myCanvas"></canvas>

<script>
  var can = document.getElementById("myCanvas");
  var ctx = can.getContext("2d");
  var xPos = 10;
  var yPos = 20;

  function drawText() {
    xPos += 10 
    yPos += 10 
    ctx.clearRect(0, 0, 999, 999)
    ctx.fillStyle = "red";
    ctx.font = "30px Arial";
    ctx.fillText("Kunal Sharma", xPos, yPos);
  }
  drawText()
</script>

这个想法是改变函数内的 xPos 和 yPos。
我们会在每次调用drawText 时清除并重新绘制。