javascript - 使用 Javascript 单击更新 Canvas 绘图

Question

我正在尝试使用 JavaScript 函数增加 Canvas 中绘制的圆的半径。

有很多主题有类似的问题，但找不到解决这个问题的答案，我尝试使用建议的内置方法，如 setInterval、setTimeout、window.requestAnimationFrame 并清除 Canvas 以使用更新后的变量重新绘制圆圈。

到目前为止，setInterval 方法显示了更新但在 Canvas 中保留了之前的迭代，clear 方法不起作用。

例子如下:

//Define globals
var radiusIncrement = 5;
var ballRadius = 20;

//Helper functions
function increaseRadius() {
  ballRadius += radiusIncrement;
}

function decreaseRadius() {
  if (ballRadius > 0) {
    ballRadius -= radiusIncrement;
  }
}


//Draw handler
function draw() {
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(canvas.height/2,canvas.width/2,ballRadius,0,2*Math.PI);
  ctx.stroke();
}

//Event handler
setInterval(function() {
  draw();
  ctx.clearRect(0,0,canvas.width,canvas.height);
}, 100);

<!--Create frame and assign callbacks to event handlers-->
<button type="button" onclick="increaseRadius()">Increase Radius</button>
<button type="button" onclick="decreaseRadius()">Decrease Radius</button>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>

除了使用 setInterval，有没有一种方法可以简化代码并使用事件处理程序在每次点击时刷新 Canvas ？

感谢您的帮助。

干杯。

Answer 1

如果我理解正确的话，您只想在单击按钮时重绘，即在半径变化时重绘。您不需要为此使用任何计时功能，只要半径发生变化，您就可以调用绘制功能:

//Define globals
var radiusIncrement = 5;
var ballRadius = 20;
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

//initialize
draw();

//Helper functions
function increaseRadius() {
  ballRadius += radiusIncrement;
  draw();
}

function decreaseRadius() {
  if (ballRadius > 0) {
    ballRadius -= radiusIncrement;
    draw();
  }
}


//Draw handler
function draw() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath();
  ctx.arc(canvas.height/2,canvas.width/2,ballRadius,0,2*Math.PI);
  ctx.stroke();
}

如您所见，我还从 draw 函数中提取了 canvas 和 ctx 的变量定义，因为您不需要在每次重新分配它们draw 调用。