1

我有一个 ID 为“draw”的按钮，并且每次单击该绘制按钮时都想要处理下一个操作（即在我的情况下为形状）。我尝试了 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);  

};
4

2 回答 2

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 语句，这可能会删除一些代码重复。

于 2013-10-19T13:24:07.890 回答
0

不，这不是方法，因为当您向 html 元素的同一事件添加多个侦听器时，所有侦听器将同时触发。

因此，您需要创建一个 poll(array of functions)，然后在单击元素时将一个新函数放入一个数组中执行，然后另一个函数控制这些函数的执行。

您可以使用函数数组，您的点击事件会将函数放在数组中，然后您可以稍后调用（如此stackoverflow question中的说明）。

如果您想控制函数列表的动态执行，此示例是一个更好的解决方案。

如何添加函数列表：

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);

因此，无论用户点击了多少次，您都将执行所有这些操作。

于 2013-10-19T12:49:48.530 回答