Javascript 如何在JS&；中获得选中的单选按钮以在画布上执行不同的功能；html

我尝试使用单选按钮来定义用户可以对画布上的对象执行的操作。下面是定义按钮移动向量的部分代码，单击该按钮时，用户可以在单击和拖动箭头时移动屏幕上的一些箭头。我最终希望有一个单独的按钮来旋转和缩放箭头，但我希望它取决于选择的单选按钮。我尝试了下面的代码，但它什么也没做。没有错误代码。它在我添加按钮之前工作，所以我知道应用选中按钮选项时一定出错。有人知道为什么这样不行吗

    <td><input name="vectorFunction" type="radio" value="moveVector" id="moveVector" onClick="changeVector();"></td>
    <script>
        window.onload = function () {
          var canvas = document.getElementById('canvas');
              context = canvas.getContext('2d');
              mouse = utils.captureMouse(canvas);
              arrow1 = new Arrow();

                arrow1.x = 500;
                arrow1.y = 500;

          var arrow2 = new Arrow();
          arrow2.x = 300;
          arrow2.y = 300;

          function changeVector() {
              if (document.getElementsById("moveVector").checked == true) {

                canvas.addEventListener('mousedown', function () {
                    if (utils.containsPoint(arrow1.getBounds(), mouse.x, mouse.y)) {
                    canvas.addEventListener('mouseup', onMouseUp, false);
                 canvas.addEventListener('mousemove', onMouseMove, false);
              }
              if (utils.containsPoint(arrow2.getBounds(), mouse.x, mouse.y)) {
                 canvas.addEventListener('mouseup', onMouseUp2, false);
                 canvas.addEventListener('mousemove', onMouseMove2, false);
              }
           }, false);

                  function onMouseUp() {
                      canvas.removeEventListener('mouseup', onMouseUp, false);
                      canvas.removeEventListener('mousemove', onMouseMove, false);
          }
                  function onMouseUp2() {
                      canvas.removeEventListener('mouseup', onMouseUp2, false);
                      canvas.removeEventListener('mousemove', onMouseMove2, false);
          }
                  function onMouseMove (event) {
                      arrow1.x = mouse.x;
                      arrow1.y = mouse.y;
                    }
                  function onMouseMove2 (event) {
                      arrow2.x = mouse.x;
                      arrow2.y = mouse.y;
                  }
              }
              else {
                  //Do nothing
              }
          }

window.onload=函数（）{
var canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
鼠标=utils.captureMouse（画布）；
箭头1=新箭头（）；
箭头1.x=500；
箭头1.y=500；
var arrow2=新箭头（）；
箭头2.x=300；
箭头2.y=300；
函数changeVector（）{
if（document.getElementsById（“movevevector”）.checked==true）{
canvas.addEventListener（'mousedown'，function（）{
if（utils.containsPoint（arrow1.getBounds（），mouse.x，mouse.y））{
canvas.addEventListener（'mouseup'，onMouseUp，false）；
addEventListener（'mousemove'，onMouseMove，false）；
}
if（utils.containsPoint（arrow2.getBounds（），mouse.x，mouse.y））{
canvas.addEventListener（'mouseup'，onMouseUp2，false）；
addEventListener（'mousemove'，onMouseMove2，false）；
}
}，假）；
函数onMouseUp（）{
canvas.removeEventListener（'mouseup'，onMouseUp，false）；
canvas.removeEventListener（'mousemove'，onMouseMove，false）；
}
函数onMouseUp2（）{
canvas.removeEventListener（'mouseup'，onMouseUp2，false）；
removeEventListener（'mousemove'，onMouseMove2，false）；
}
mouseMove函数（事件）{
箭头1.x=鼠标.x；
箭头1.y=鼠标.y；
}
mouseMove2函数（事件）{
箭头2.x=鼠标.x；
箭头2.y=鼠标.y；
}
}
否则{
//无所事事
}
}

不确定这是否只是示例中的输入错误，但您的if语句如下所示：

if（document.getElementsById（“movevevector”）.checked==true）

尝试更改为单数版本，因为您要查找的是该复选框，而不是列表

即：

---

if（document.getElementById（“moveVector”）.checked==true）

诀窍是将事件侦听器带到检查按钮单击的函数之外，因为您必须让JS告诉html检查按钮是否被选中，而在函数中锁定画布侦听器时，它不能这样做。然后我删除了===true部分，因为它是多余的。下面是有效的方法

<div class="large-6 medium-6 columns">
<label>Select one</label>
<input type="radio" name="vfnselect" value="move" id="vmover" checked>Move</label>

canvas.addEventListener('mousedown', function () {
    if (utils.containsPoint(arrow1.getBounds(), mouse.x, mouse.y)) {
      canvas.addEventListener('mouseup', onMouseUp1, false);
      canvas.addEventListener('mousemove', onMouseVector1, false);
    }
 }, false);
  function onMouseUp1() {
    canvas.removeEventListener('mouseup', onMouseUp1, false);
    canvas.removeEventListener('mousemove', onMouseVector1, false);
  }
function onMouseVector1 (event) {
    if (document.getElementById('vmover').checked) {
      arrow1.x = mouse.x;
      arrow1.y = mouse.y;
    }

选择一个
移动
canvas.addEventListener（'mousedown'，function（）{
if（utils.containsPoint（arrow1.getBounds（），mouse.x，mouse.y））{
canvas.addEventListener（'mouseup'，onMouseUp1，false）；
addEventListener（'mousemove'，onMouseVector1，false）；
}
}，假）；
函数onMouseUp1（）{
canvas.removeEventListener（'mouseup'，onMouseUp1，false）；
canvas.removeEventListener（'mousemove'，onMouseVector1，false）；
}
函数onMouseVector1（事件）{
if（document.getElementById（'vmover'）。选中）{
箭头1.x=鼠标.x；
箭头1.y=鼠标.y；
}

是的，还是没什么……不过还是要谢谢你的花絮！