时间戳

首页 > 解决方案 > 如何使用调用函数以使文本出现在 Javascript 中的按钮移动画布中的文本？

javascript - 如何使用调用函数以使文本出现在 Javascript 中的按钮移动画布中的文本？

问题描述

我的 HTML 中有一个画布，id="myCanvas"单击时有一个按钮调用此函数：

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

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

标签： javascripthtmlcanvasjavascript-objects

解决方案

这是一个简单的例子：

<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 时清除并重绘。

推荐阅读