Question

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

有许多主题存在类似问题，但无法找到解决此问题的答案，我尝试使用建议的内置方法，如setInterval，setTimeout，{{ 1}}并清除画布以使用更新的变量重绘圆圈。

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

以下是示例：

setInterval

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

有没有一种方法可以使用setInterval来简化代码，并使用事件处理程序在每次onlick上刷新画布？

感谢您的帮助。

干杯。

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的变量定义，因为您不需要在每个{{1}上重新分配这些变量。打电话。

使用Javascript

1 个答案: