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

我试着这样做，当我点击按钮更改半径大小时，它会将所有圆的半径大小更改为5-10之间的随机大小

我已经试着画了两个圆圈（一个黑色，一个蓝色），然后尝试将半径更改为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>

改变大小
变量编号=数学最小值（数学最大值（副变量（编号），5），10）；
让canvas=document.getElementById（“myCanvas”）；
设ctx=canvas.getContext（“2d”）；
ctx.translate（100120）；
ctx.beginPath（）；
弧（0,0,10,0,2*Math.PI）；
ctx.fillStyle=“黑色”；
ctx.fill（）；
ctx.translate（140120）；
ctx.beginPath（）；
弧（0,0,10,0,2*Math.PI）；
ctx.fillStyle=“蓝色”；
ctx.fill（）；
document.getElementById（“changeRadius”）.onclick=function（）{
ctx.clearRect
ctx.translate（100120）；
ctx.beginPath（）；
弧（0，0，“数字”，0，2*Math.PI）；
ctx.fillStyle=“黑色”；
ctx.fill（）；
ctx.translate（140120）；
ctx.beginPath（）；
弧（0，0，“数字”，0，2*Math.PI）；
ctx.fillStyle=“蓝色”；
ctx.fill（）；
如果（event.keycode==s）{
ctx.translate（100120）；
ctx.beginPath（）；
弧（0,0,5,0,2*Math.PI）；
ctx.fillStyle=“黑色”；
ctx.fill（）；
ctx.translate（140120）；
ctx.beginPath（）；
弧（0,0,5,0,2*Math.PI）；
ctx.fillStyle=“蓝色”；
ctx.fill（）；
}else if（event.keycode==b）{
ctx.translate（100120）；
ctx.beginPath（）；
弧（0,0,10,0,2*Math.PI）；
ctx.fillStyle=“黑色”；
ctx.fill（）；
ctx.translate（140120）；
ctx.beginPath（）；
弧（0,0,10,0,2*Math.PI）；
ctx.fillStyle=“蓝色”；
ctx.fill（）；
}
}

代码中有许多简单的错误

1. 当您调用clearRect时，您有：

ctx.clearRect

但它必须是：

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

其中，x、y、宽度和高度定义要清除的矩形。要清除整个画布，请使用：

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

的值，所以即使是上面的问题也没有任何作用。

迈克尔，你的问题已经问了一段时间了，但希望这个答案对你和其他仍在学习JavaScript的人可能仍然有用。一旦我解决了所列的基本语法问题，丢失的圆圈就变得可见了。在我发现了三件事

在画布上绘制的图像可能不会显示在您期望的位置

在第一个变量中声明并初始化为

number

语句不会生成有效数字，更不用说随机数字了

您的代码有

if

和

if-else

语句，这些语句不会做任何事情 没有事件处理程序

---

#1

代码使用

ctx.arc（）

绘制基本圆，并使用

ctx.translate（）

将其移动到画布上的位置。使用

ctx.translate（）

两个参数x和y确定圆移动的距离；x是水平方向移动的距离；y是垂直方向移动的距离

问题是移动后您不再知道画布上的位置坐标。因此，在继续执行下一个

ctx.translate（）

操作之前，需要重置原点

要重置原点，请使用

CanvasRenderingContext2D.setTransform（）

ctx.setTransform(1, 0, 0, 1, 0, 0);

画布2D的CanvasRenderingContext2D.setTransform（）方法 API将当前转换重置（覆盖）为标识 矩阵，然后调用由参数描述的转换 这使您可以缩放、旋转、平移（移动）和 歪曲上下文

此API设计用于动画绘制，使用多种方法动态转换2D形状。对于您的代码，只需了解清除标识矩阵即可恢复

0,0

（画布原点）作为以下任何绘图操作中使用的x和y值的参考。在使用

ctx.translate（）

重置原点之前，请注意代码启动时这将产生的差异

发射时原点重置的影响

/

每当绘制新图像时，必须首先使用

ctx.clearRect（）清除整个画布

执行此操作之前，重置原点非常重要。单击每个示例中的“更改大小”按钮，查看是否通过原点重置清除整个屏幕。如果不进行重置，则清除矩形的原点将与绘制的最后一个圆的中心对齐，即清除的矩形将进入ci的右下象限罗勒

原点重置对清除画布的影响

/

---

#2

第二个问题可以通过在第一条指令后插入

alert（number）

来演示。当代码运行时，

alert

报告一条

NaN

消息（即不是一个数字）。此外，随机值在0.0到1.0之间，但出于您的目的，可以缩放到5.0到10.0之间的范围（有关更多信息，请参阅和）

下面的代码显示了

getNewRadius（），

一个函数，每当单击“更改大小”按钮时，该函数都会生成一个随机数。在调用该函数之前，将声明常量和变量并初始化

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

<script>
const maxRadius     = 10;
const minRadius     = 5;
var range           = maxRadius - minRadius;
var radius          = maxRadius;

let canvas          = document.getElementById("myCanvas");
let ctx             = canvas.getContext("2d");

    document.addEventListener('keydown', setMaxOrMinRadius);

    drawCircles(maxRadius);

    document.getElementById("changeRadius").onclick = function() {
    clearCanvas();
    radius          = getNewRadius();
    drawCircles(radius);
}

function setMaxOrMinRadius(e) {
clearCanvas();
switch (e.which) {
    case 83:                                // type 's'
        drawCircles(minRadius);
    break;

    case 66:                                // type 'b'
        drawCircles(maxRadius);
    break;
    }
}

function getNewRadius() {
    var radius      = (Math.random() * minRadius) + range;
    return radius;
}

function drawCircles(radius) {
    drawBlueCircle(radius);
    drawBlackCircle(radius);
}

function clearCanvas(){
    ctx.setTransform(1, 0, 0, 1, 0, 0);     // reset origin
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawBlackCircle (radius) {
    ctx.setTransform(1, 0, 0, 1, 0, 0);     // reset origin
    ctx.translate(100,120);
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2 * Math.PI);
    ctx.fillStyle   = "black";
    ctx.fill();
}

function drawBlueCircle (radius) {
    ctx.setTransform(1, 0, 0, 1, 0, 0);     // reset origin
    ctx.translate(140,120);
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2 * Math.PI);
    ctx.fillStyle   = "blue";
    ctx.fill();
}