javascript - 通过 JavaScript 使用 Canvas，如何在单击按钮后更改圆的半径？

Question

我试图做到这一点，以便当我单击更改半径大小的按钮时，它会将所有圆的半径大小更改为 5-10 之间的随机大小。

我已经尝试绘制 2 个圆圈(1 个黑色，1 个蓝色)并调用，然后尝试将半径更改为 5-10 之间的新随机半径大小。添加我的函数后，我看不到我绘制的两个圆圈。非常感谢任何反馈。

<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、宽度和高度定义要清除的矩形。要清除整个 Canvas ，请使用:

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

2.

您将 parseInt 拼写为 paraseInt。

3.

您在调用ctx.arc时将“number”作为半径...我什至不知道您想要实现什么目标。看起来像一个占位符？无论如何，它必须是一个实际的数字，而不仅仅是字符串“number”。

也许您打算使用在顶部创建但从未使用过的变量number？

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

变成了

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

(注意没有 " 字符)

4.

您从未真正更新 number 的值，因此即使上面的内容也不会执行任何操作。