Question

我第一次尝试画布。创建圆后，我希望能够通过单击按钮更改此圆的中心位置。但我无法弄清楚如何做到这一点。有人可以建议一个方法吗？

#button{
height: 25px;
width:125px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}

<html>
    <head></head>
    <body>
    <div id="button" onclick="changePosition()">Click here</div>
    <canvas id="testCanvas" width="500px" height="500px"></canvas>
    
    <script type="text/javascript">
    var canvas = document.getElementById("testCanvas");
	var a = canvas.getContext("2d");
        a.fillStyle = "#b22222";
	a.beginPath();
	a.arc(100,100,25,0,2*Math.PI);
	a.fill();
	
  function changePosition(){
    //what do I put here??
    
  }
    </script>
    </body>
    </html>

Answer 1

您需要重绘场景。创建一个重置画布然后绘制圆圈的函数

var canvas = document.getElementById("testCanvas");
var ctx = canvas.getContext("2d");
var circlePos = {
  left: 100,
  top: 100,
}

function renderCircle( circlePos ) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#b22222";
  ctx.beginPath();
  ctx.arc(circlePos.left, circlePos.top, 25, 0, 2 * Math.PI);
  ctx.fill();
}

function changePosition() {
  circlePos.left += 10;
  if ( circlePos.left > canvas.width ) {
    circlePos.left = 0;
  }
  renderCircle( circlePos );
}
changePosition();

#button {
  height: 25px;
  width: 125px;
  border: 1px solid black;
  text-align: center;
  cursor: pointer;
}

<button onclick="changePosition()">Click here</button>
<canvas id="testCanvas" width="500" height="200"></canvas>

如何在画布上更改圆的X-Y位置

1 个答案: