Javascript 需要选中取消选中然后选中单选按钮才能工作_Javascript_Html_Radio Button

Javascript 需要选中取消选中然后选中单选按钮才能工作

javascript html

Javascript 需要选中取消选中然后选中单选按钮才能工作,javascript,html,radio-button,Javascript,Html,Radio Button,我今天的问题是问为什么我必须取消检查单选按钮，然后重新检查单选按钮是否工作。我创建了一个像素抽屉，用单选按钮改变颜色/大小。我不知道是什么问题 <!DOCTYPE html> <html> <head> <title>Pixel Draw</title> <style> #canvas{border: 1px solid black} </style> </head> <body> &l

我今天的问题是问为什么我必须取消检查单选按钮，然后重新检查单选按钮是否工作。我创建了一个像素抽屉，用单选按钮改变颜色/大小。我不知道是什么问题

<!DOCTYPE html>
<html>
<head>
<title>Pixel Draw</title>
<style>
#canvas{border: 1px solid black}
</style>
</head>
<body>

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<canvas id="canvas" width="800" height="800" style="cursor:crosshair"></canvas>
<br />
<STRONG>Color</STRONG>:
<form id="colorForm">
<input type="radio" name="color" value="black" checked="checked">Black
<input type="radio" name="color" value="red">Red
<input type="radio" name="color" value="orange">Orange
<input type="radio" name="color" value="yellow">Yellow
<input type="radio" name="color" value="green">Green
<input type="radio" name="color" value="blue">Blue
<input type="radio" name="color" value="purple">Purple
</form>
<form id="sizeForm">
<br />
<STRONG>Size</STRONG>:
<input type="radio" name="size" value="10">Big
<input type="radio" name="size" value="5" checked="checked">Normal
<input type="radio" name="size" value="2">Small
</form>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 5

$('#colorForm input').on('change', function() {
   $('input:radio').on('change', function(){
  ctx.fillStyle = $(this).val();
});
});

$('#sizeForm input').on('change', function() {
   $('input:radio').on('change', function(){
  size = $(this).val();
});
});


function draw(event) {
  ctx.fillRect(event.pageX, event.pageY, size, size)
}

$("html").mousedown(function () {
    $("html").mousemove(function (event) {
        draw(event);
    })
    $("html").click(function (event) {
        draw(event);
    })
})

$("html").mouseup(function () {
    $("html").off("mousemove")
})

</script>
</body>


</html>


像素绘制
#画布{边框：1px纯黑}


颜色：
黑色
红色
橙色
黄色的
绿色
蓝色
紫色


大小：
大的
正常的
小的
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量大小=5
$（'#colorForm input'）。在（'change'，function（）上{
$（'input:radio'）。on（'change'，function（）{
ctx.fillStyle=$（this.val（）；
});
});
$（'sizeForm input'）。在（'change'，function（）上{
$（'input:radio'）。on（'change'，function（）{
size=$（this.val（）；
});
});
功能图（事件）{
ctx.fillRect（event.pageX，event.pageY，size，size）
}
$（“html”）.mousedown（函数（）{
$（“html”）.mousemove（函数（事件）{
抽签（活动）；
})
$（“html”）。单击（函数（事件）{
抽签（活动）；
})
})
$（“html”）.mouseup（函数（）{
$（“html”）.off（“鼠标移动”）
})

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量大小=5
$（'#colorForm input'）。在（'change'，function（）上{
ctx.fillStyle=$（this.val（）；
});
$（'sizeForm input'）。在（'change'，function（）上{
size=$（this.val（）；
});
功能图（事件）{
var posX=event.pageX-$（“#画布”）.offset（）.left；
var posY=event.pageY-$（“#canvas”）.offset（）.top；
ctx.fillRect（posX，posY，size，size）
}
$（“html”）.mousedown（函数（）{
$（“html”）.mousemove（函数（事件）{
抽签（活动）；
})
$（“html”）。单击（函数（事件）{
抽签（活动）；
})
})
$（“html”）.mouseup（函数（）{
$（“html”）.off（“鼠标移动”）
})

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


颜色：
黑色
红色
橙色
黄色的
绿色
蓝色
紫色


大小：
大的
正常的
小的

尽管实际的绘图点和十字线已关闭，但工作正常。你知道怎么解决吗？