我有一个名为'draw'的ID按钮,想要从中获取,每次我点击该绘图按钮时,下一个要处理的操作(即我的情况下的形状)。 我尝试使用style.visibility但是没有用。也许我做错了。 但是,这是代码:
window.onload = function() {
var canvas = document.getElementById('myCanvas'),
draw = document.getElementById('draw'),
clr = document.getElementById('clear'),
context = canvas.getContext('2d');
var grad = context.createLinearGradient(100,0,200,0);
function shapeOne(){
context.beginPath(); // circle
context.fillStyle = 'blue';
context.arc(200, 100, 100, 50 , 2 * Math.PI, false);
context.fill();
context.lineWidth = '1';
context.stroke();
context.closePath();
}
function shapeTwo(){
context.beginPath(); // rectangle
grad.addColorStop(0,"#0033cc");
grad.addColorStop(1,"#0066ff");
context.fillStyle=grad;
context.fillRect(120,40,160,120);
context.strokeStyle="black";
context.strokeRect(120,40,160,120);
context.closePath();
}
function shapeThree(){
context.beginPath(); // line
context.moveTo(280, 40);
context.lineTo(120, 160);
context.stroke();
context.closePath();
}
draw.addEventListener('click', shapeOne, false);
draw.addEventListener('click', shapeTwo, false);
draw.addEventListener('click', shapeThree, false);
clr.addEventListener('click', function(){
canvas.width = canvas.width;
}, false);
};
答案 0 :(得分:1)
正如其他人所说,目前绑定到'draw'元素的所有事件监听器都会同时触发。真的没有必要有多个事件监听器。您只需要知道当前要绘制的形状。
所以我会声明一个名为currentShape
的变量并将其设置为零。
var canvas = document.getElementById('myCanvas'),
draw = document.getElementById('draw'),
clr = document.getElementById('clear'),
context = canvas.getContext('2d');
var grad = context.createLinearGradient(100,0,200,0);
// Start current shape at 0
var currentShape = 0;
// More code ...
然后我会创建一个数组,它基本上是你拥有的形状绘制函数的列表。
像这样:var shapes = [shapeOne, shapeTwo, shapeThree]
然后,而不是你的三个事件监听器,只有一个看起来像这样的东西:
draw.addEventListener('click', function(){
// Check if there is a function available for the current shape.
if(shapes[currentShape]) {
// If so, call that function and add one to the current shape.
shapes[currentShape]();
currentShape += 1;
} else { // If the function isn't available, then lets assume we have already drawn all the shapes and need to start again.
currentShape = 0;
shapes[currentShape]();
}
}, false);
还有很多其他方法可以做到这一点。包括使用switch statement,这可能会删除一些代码重复。
答案 1 :(得分:0)
不,这不是的方式,因为当您向html元素的同一事件添加多个侦听器时,所有侦听器都会同时触发。
所以,你需要创建一个poll(函数数组),然后当单击该元素时你将一个新函数放在一个数组中执行,然后另一个函数控制执行那些功能。
你可以使用一组函数,你的click事件会把函数放在数组中,然后你可以在另一个时刻调用(在stackoverflow question解释)。
如果您想控制动态执行功能列表此sample is a better solution。
如何添加功能列表:
var listRuns = [],
ind = 0;
$('#btnRun').click(function(){
var message = document.getElementById("txtMsg").value;
listRuns.push(function(){
run(message);
});
});
如何执行它们:
var runAll = function(){
console.log('called');
if (listRuns.length>ind){
listRuns[ind]();
ind++;
}
};
var idInterval = setInterval(function(){
runAll();
},1000);
因此,无论用户执行了多少次点击,您都将执行所有这些操作。