Javascript 使用单选按钮绘制圆形和方形不起作用

我今天的问题是问为什么当我切换单选按钮时，画一个圆圈和一个正方形都不起作用。这是我正在创建的绘画程序。请帮我回答这个问题。还有，你能帮我解释一下为什么这个项目如此滞后吗？除息的。代码如下：

var square=true
函数myFunction（）{
var x=document.getElementById（“myColor”）.value；
ctx.fillStyle=x；
};
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量大小=5
var-eraserSize=5；
$（'#colorForm input'）。在（'change'，function（）上{
ctx.fillStyle=$（this.val（）；
});
$（'sizeForm input'）。在（'change'，function（）上{
size=$（this.val（）；
});
函数drawRect（事件）{
var posX=event.pageX-$（“#画布”）.offset（）.left-4
var posY=event.pageY-$（“#canvas”）.offset（）.top-4
ctx.fillRect（posX，posY，size，size）
}
函数drawCircle（事件）{
var posX=event.pageX-$（“#画布”）.offset（）.left
var posY=event.pageY-$（“#画布”）.offset（）.top
ctx.beginPath（）；
弧（posX，posY，size-1，0，Math.PI/2，false）；
ctx.closePath（）；
ctx.fill（）；
}
函数检查（）{
如果（平方===真）{
$（“html”）.mousedown（函数（）{
$（“html”）.mousemove（函数（事件）{
drawRect（事件）；
})
$（“html”）。单击（函数（事件）{
drawRect（事件）；
})
})
$（“html”）.mouseup（函数（）{
$（“html”）.off（“鼠标移动”）
})
}
如果（平方===假）{
$（“html”）.mousedown（函数（）{
$（“html”）.mousemove（函数（事件）{
抽奖圈（活动）；
})
$（“html”）。单击（函数（事件）{
抽奖圈（活动）；
})
})
$（“html”）.mouseup（函数（）{
$（“html”）.off（“鼠标移动”）
})
}
}
函数clearCanvas（）{
if（确认（“是否确实要清除图形？”）==true）{
ctx.clearRect（0,0,800,800）
}
}
setInterval（函数（）{
检查（）；
}，1）

#画布{
边框：1px纯黑
}

选择您的绘图形状：
广场
圆圈


颜色设置：
好啊

基本颜色：


黑色
红色
橙色
黄色的
绿色
蓝色
紫色
橡皮擦（白色）


大小：
大的
正常的
小的


清晰的绘图

.arc（）

取弧度-2π是一个完整的圆，你在做π/2，它是90度。这里有一个简单的转换器：

我在下面调整了您的代码，您没有清理

onmousedown

侦听器。如果使用了

mouseup

（因为您已经

mousedown

，您已经有了一半的点击），那么

click

侦听器实际上是不必要的。

setInterval

是不必要的；您可以收听

mousedown

开始绘图。将侦听器的范围限制在画布上，而不是所有HTML，也可以提高性能

var square=true；//设置
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量大小=5
var-eraserSize=5；
$（'#colorForm input，#myColor'）。on（'change'，function（）{
ctx.fillStyle=$（this.val（）；
});
$（'sizeForm input'）。在（'change'，function（）上{
size=$（this.val（）；
});
函数drawRect（事件）{
var posX=event.pageX-$（canvas.offset（）.left-4
var posY=event.pageY-$（canvas.offset（）.top-4
ctx.fillRect（posX，posY，size，size）
}
函数drawCircle（事件）{
var posX=event.pageX-$（画布）.offset（）.left
var posY=event.pageY-$（画布）.offset（）.top
ctx.beginPath（）；
弧（posX，posY，size-1，0，Math.PI*2，false）；
ctx.closePath（）；
ctx.fill（）；
}
功能鼠标向下（e）{
//我们只关心画布上的鼠标移动，而不关心整个页面
if（方形）{
$（canvas）.on（'mousemove'，drawRect.on（'mouseup'，drawRect）；
}否则{
$（画布）.on（'mousemove'，drawCircle.on（'mouseup'，drawCircle）；
}
//如果用户将鼠标移到画布之外，我们不想继续侦听，因此请在整个页面上侦听鼠标以删除其他绘图侦听器
$（'html'）.one（'mouseup'，function（）{/“one”意味着它只会启动一次，然后停止侦听（免费清理）
$（画布）.off（'mousemove'）.off（'mouseup'）；
});
}
函数clearCanvas（）{
if（确认（“是否确实要清除图形？”）==true）{
ctx.clearRect（0,0,800,800）
}
}
//我们只关心画布上的鼠标向下移动，而不关心整个页面
$（画布）.on（'mousedown'，mousedown）
#画布{
边框：1px纯黑；
光标：十字线；
}
h2，
h3{
页边距底部：0；
}
氢{
字号：1.1rem；
}
h3{
字号：1rem；
}

选择您的图形形状：

广场
圆圈

颜色设置：
基本颜色：

黑色
红色
橙色
黄色的
绿色
蓝色
紫色
橡皮擦（白色）

尺寸：

大的
正常的
小的



清晰的绘图
首先，您的代码在行尾缺少大量分号，这通常是非常糟糕的做法。我想说，你的第一步行动是填写这些表格，以确保丢失的分号是导致问题的原因

第二，当您更改square变量时，它首先分配onmousedown处理程序以使用drawRect方法。但是，当您选择circle和square时，您将分配onmousedown处理程序使用drawCircle方法，而不解除先前onmousedown处理程序的绑定。使用jQuery，再次分配处理程序不会覆盖以前的处理程序

我看到的另一个问题是，圆圈一开始画得不正确。如果您最初设置square=false并尝试绘制一个圆，那么它只是绘制了一个半圆，因此请检查您的绘制圆。
否，但当我要绘制圆时，将同时绘制和绘制正方形以及圆，您如何解决这一问题？还有，为什么程序会滞后？而且现在仍然如此