Используя Canvas через JavaScript, как я могу изменить радиус круга после нажатия кнопки?

Question

Я пытаюсь сделать так, чтобы при нажатии на кнопку, чтобы изменить размер радиуса, он изменил бы размер радиуса всего круга на случайный размер между 5-10.

Я уже пытался нарисовать 2 круга (1 черный, 1 синий), а затем call попытался изменить радиус на новый размер случайного радиуса между 5-10. После добавления моей функции я не вижу 2 круга, которые я нарисовал. Любая обратная связь с благодарностью.

<canvas width="300" height="300" id="myCanvas" style="border: 1px solid black"></canvas>
<button id="changeRadius">Change Size</button>

<script>
var number = Math.min(Math.max(paraseInt(number), 5), 10);
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.translate(100,120);
ctx.beginPath(); 
  ctx.arc(0, 0, 10, 0, 2 * Math.PI);
  ctx.fillStyle = "black";
  ctx.fill();
ctx.translate(140,120);
ctx.beginPath(); 
  ctx.arc(0, 0, 10, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();
document.getElementById("changeRadius").onclick = function() {
ctx.clearRect
ctx.translate(100,120);
ctx.beginPath(); 
  ctx.arc(0, 0, "number", 0, 2 * Math.PI);
  ctx.fillStyle = "black";
  ctx.fill();
ctx.translate(140,120);
ctx.beginPath(); 
  ctx.arc(0, 0, "number", 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();
if (event.keycode == s){
ctx.translate(100,120);
ctx.beginPath(); 
  ctx.arc(0, 0, 5, 0, 2 * Math.PI);
  ctx.fillStyle = "black";
  ctx.fill();
ctx.translate(140,120);
ctx.beginPath(); 
  ctx.arc(0, 0, 5, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();
}else if (event.keycode == b) {
ctx.translate(100,120);
ctx.beginPath(); 
  ctx.arc(0, 0, 10, 0, 2 * Math.PI);
  ctx.fillStyle = "black";
  ctx.fill();
ctx.translate(140,120);
ctx.beginPath(); 
  ctx.arc(0, 0, 10, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();
}
}
</script>

Answer 1

В коде много простых ошибок.

1.

Когда вы вызываете clearRect, у вас есть:

ctx.clearRect

, но это должно быть:

ctx.clearRect(x, y, width, height);

где x, y, ширина и высота определяют прямоугольник, который вы хотите очистить.Чтобы очистить весь холст, используйте:

ctx.clearRect(0, 0, canvas.width, canvas.height);

2.

Вы ошиблись parseInt как paraseInt.

3.

Где вы указали "number" в качестве радиуса при вызовах ctx.arc ... Я даже не знаю, чего вы пытаетесь достичь.Это похоже на заполнитель?В любом случае, это должно быть действительное число, а не просто строка "number".

Возможно, вы намеревались использовать переменную number, которую вы создаете вверху, и никогда не использовать?

ctx.arc(0, 0, "number", 0, 2 * Math.PI);

становится

ctx.arc(0, 0, number, 0, 2 * Math.PI);

(обратите внимание, нет " символов)

4.

Вы фактически никогда не обновите значение number, так что даже вышене буду ничего делать.