如何编写 javascript 单选按钮答案

【问题标题】：How to program javascript radio buttons如何编写 javascript 单选按钮
【发布时间】：2014-03-28 15:18:22
【问题描述】：

我有这段代码，它最终将成为一个小绘图工具，用户可以在其中切换铅笔和橡皮擦。我正在尝试对橡皮擦进行编程。但是，如果用户选择橡皮擦单选按钮，然后选择铅笔单选按钮（取消选择橡皮擦），橡皮擦不会“关闭”。

这一切都是通过 HTML 的 canvas 元素完成的，橡皮擦利用了：

        context.globalCompositeOperation="destination-out";

正如下面的代码所示，我认为我可以根据单击的按钮来遍历和反转一些属性，例如将 globalCompositeOperation 更改为等于“source-over”或 globalCompositeOperation 的另一个属性，但是据我所知，一旦为它设置了属性，唯一改变它的方法就是重置整个画布，这将删除所有内容。

然后我想我可以使用以下方法设置画笔的不透明度：

        context.globalAlpha=0;

因此，选择铅笔工具时，橡皮擦工具仍在删除，但在0％不透明度下，因此它不应该做任何事情。不幸的是，这些都不起作用。

我是自学成才的，所以虽然我对 HTML 画布有一定的了解，但我发现很难了解单选按钮编程的 JS 方面。

我想我的问题是，如果通过单选按钮 onclick 事件激活了某些代码，一旦取消选择单选按钮，我该如何停用代码。

感谢任何建议，需要任何帮助！

这是我的代码：（对不起格式，堆栈溢出不喜欢我的缩进）

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main">
    <div class="tools" style="position:fixed;">Pencil:<input type="radio" name="toolSelect" onclick="pencilCheck();" id="pencilSelect"></div>
    <div class="tools" style="position:fixed; left: 80px;">Rubber:<input type="radio" name="toolSelect" onclick="rubberCheck()" id="rubberSelect"></div>
    <canvas id="canvas">This is a web application, you need to update your browser.</canvas><!-- the canvas -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

//Makes the canvas the size of the browser window
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


context.fillStyle = "red";
context.fillRect(40,40,250,100);




function rubberCheck(){
var dragging = false;
var erase = function(rubber){
if(dragging){
context.beginPath();
context.arc(rubber.clientX, rubber.clientY, 10, 0, Math.PI*2);
context.fill();
context.globalCompositeOperation="destination-out";
    context.globalAlpha=1;      
    }
}

var click = function(rubber){
dragging = true;
erase(rubber);
}

var unclick = function(){
dragging = false;
}


canvas.addEventListener('mousedown', click);
canvas.addEventListener('mousemove', erase);
canvas.addEventListener('mouseup', unclick);

}

if(pencilCheck){
var dragging = false;
var erase = function(rubber){
if(dragging){
context.beginPath();
context.arc(rubber.clientX, rubber.clientY, 10, 0, Math.PI*2);
context.fill();
context.globalCompositeOperation="destination-over";
context.globalAlpha=0;
}
}

var click = function(rubber){
dragging = true;
erase(rubber);
}

 var unclick = function(){
dragging = false;
}


canvas.addEventListener('mousedown', click);
canvas.addEventListener('mousemove', erase);
canvas.addEventListener('mouseup', unclick);

}


    </script>
</body>

【问题讨论】：

标签： javascript android html canvas radio-button

【解决方案1】：

你有：

> <input type="radio" name="toolSelect" onclick="pencilCheck();" id="pencilSelect">

但是没有pencilCheck 功能。后来有：

> if (pencilCheck) {

该函数可能应该称为“setTool”或类似名称。使用 this 将被点击的按钮的引用传递给函数，并添加一个 value 属性，该属性是按钮所代表的工具：

<input type="radio" ... value="pencil" onclick="setTool(this);" ...>

然后设置一个变量的值来表示选择的工具，比如说selectedTool：

// Initial state is no tool selected (?)
var selectedTool = null;

function setTool(el) {
  if (el.checked) selectedTool = el.value;
}

对其他单选按钮执行相同操作，因此 selectedTool 始终代表当前选中的复选框。请注意，您有一个重置按钮，您需要添加一个侦听器，以便在单击它时重置 selectedTool 的值（可以使用按钮上的点击侦听器或表单上的重置侦听器，如果您正在使用表单，但您似乎没有使用表单）。

【讨论】：