Обновление холста на клик с помощью Javascript

Question

Я пытаюсь увеличить радиус круга, нарисованного в холсте, с использованием функций JavaScript.

Существовало много тем с подобными проблемами, но не смогли найти ответ, который фиксировал бы эта, я попытался с помощью встроенных методов, которые были предложены, как setInterval, setTimeout, window.requestAnimationFrame и очистным холст, чтобы перерисовать круг с обновленной переменной.

До сих пор метод setInterval отображал обновление, но сохранял предыдущие итерации в холсте, метод 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, есть способ, чтобы упростить код, используя и использовать обработчик событий, чтобы обновить холст на каждом onlick?

Благодарим за помощь.

Cheers.

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

Как вы можете видеть, что я также извлекали определение переменной для canvas и ctx из функции вытяжки, так как вам не нужно повторно назначать их при каждом вызове draw.